React에서 컴포넌트는 언제 다시 렌더링되나요?

Source: Dev.to

무엇이 리렌더링을 트리거할까?

컴포넌트의 상태를 useState 로 변경하면 React는 해당 컴포넌트의 리렌더링을 예약한다.

const [count, setCount] = useState(0);

const increment = () => setCount(count + 1);

Prop 변경

컴포넌트가 새로운 props 를 받으면(즉, 부모가 다시 렌더링되어 새로운 값을 전달하면) 기본적으로 자식도 다시 렌더링된다. 새 레퍼런스를 가진 얕게 동일한 값이라도 리렌더링을 일으킨다.

Context 변경

React Context는 컴포넌트 트리 전체에 값을 공유하는 방법을 제공한다. 컨텍스트 값이 업데이트되면 해당 값을 사용하는 모든 컴포넌트가 다시 렌더링된다.

부모 리렌더링

자식의 props 가 변경되지 않았더라도, 부모가 리렌더링하면 자식도 React.memo 로 메모이제이션되지 않은 한 리렌더링될 수 있다.

React 조정(Reconciliation): React가 리렌더링을 결정하는 방식

React는 props 와 state 를 비교할 때 레퍼런스 동일성(===)을 사용한다. 새로운 객체, 배열, 혹은 원시값이 나타나면 UI가 업데이트될 수 있다고 가정한다. 그래서 불변성(immutable) 패턴이 중요한데, 레퍼런스를 바꾸지 않고 객체를 변형하면 버그가 발생하거나 렌더링이 건너뛰어질 수 있다.

불필요한 리렌더링 방지 방법

순수 함수형 컴포넌트에 React.memo 사용

const MyComponent = React.memo(({ name }) => {
  console.log("Rendered!");
  return {name};
});

useCallback 과 useMemo 로 함수와 값 안정화

useCallback 없이 함수는 매 렌더링마다 새로 생성되어 자식 컴포넌트를 불필요하게 리렌더링시킬 수 있다.

const handleClick = useCallback(() => {
  // Do something
}, []);

Props 에 인라인 객체와 배열 사용 피하기

// Causes re-render

// Use useMemo
const data = useMemo(() => ({ a: 1 }), []);

가능한 한 상태를 로컬에 유지하기

상태를 위로 끌어올리거나 전역 컨텍스트에 과도하게 저장하면 트리 전체에 불필요한 리렌더링을 초래할 수 있다. 상태는 사용되는 위치에 가깝게 두는 것이 좋다.

결론

React가 언제 컴포넌트를 리렌더링하는지 이해하는 것은 성능 좋고 예측 가능한 인터페이스를 만들기 위해 필수적이다. 상태, props, context, 그리고 부모 업데이트가 주요 원인이다. 불변성 패턴을 채택하고 React.memo, useCallback, useMemo 같은 도구를 활용하면 불필요한 렌더링을 크게 줄이고 애플리케이션의 반응성을 높일 수 있다.