React에서의 css최적화

이전 게시글 작성에서 css최적화에 대해서 공부하였는데 실제로 자주 쓰는 기술스택의 react에서는 어떤식으로 css최적화를 적용할수있는지 글을 적어볼려합니다.

React에서 렌더링을 수행하는 시점은
1. props의 변화가 발생할경우

2. state의 변화가 발생할경우
3. forceUpdate()를 실행할경우
4. 부모 컴포넌트가 변화할경우
위의 4가지 방법이 있다고 합니다.

 

React에서 css 최적화를 적용하는 법은?

1. 인라인 스타일을 피해가야합니다.

import React from "react";

const Button = () => {
  return <button style={{ backgroundColor: "#fff" }}>버튼</button>;
}

export default Button;

 

리액트에서 렌더링 과정을 해가면서 객체의 메모리 주소값은 서로 항상 다르기 때문에 가상 DOM에 불필요한 변화가 발생했다고 인식을 해서 인라인 스타일로 처리하면 불필요한 리렌더링이 발생한다고 합니다.

해결 방안으로는 
react memo로 처리하여 불필요한 리렌더링을 막거나 styled component를 적용하여서 인라인 스타일을 적용안하고 처리할수있다.