[리액트] 컴포넌트 리렌더링 최적화

리렌더링이 발생하는 상황

1. 자신이 전달받은 props가 변경될 때

2. 자신의 state가 바뀔때

3. 부모 컴포넌트가 리렌더링될 때

4. forceUpdate 함수가 실행될 때

 

React.memo 를 사용한 리렌더링 방지

- 컴포넌트의 props가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 함.

- 컴포넌트를 만들고 나서 감싸주기만 하면 됨.

 

함수가 계속 만들어지는 상황을 방지하는 방법

1. useState의 함수형 업데이트 기능을 사용

- 파라미터로 새로운 상태 대신에, 상태 업데이트를 어떻게 할지 정의해 주는 업데이트 함수를 넣는다.

//useState 함수형 업데이트

const [number, setNumber] = useState(0);
//prevNumbers는 현재 number값을 가리킵니다.
const onIncrease = useCallback(
//어떻게 업데이트할지 정의해 주는 업데이트함수
  () => setNumber(prevNumber => prevNumber + 1),
  [],
);

2. useReducer를 사용

- 장점 : 상태를 업데이트하는 로직을 모아서 컴포넌트 바깥에 둘 수 있음

- 단점 : 기존 코드를 많이 고쳐야 함