1. React의 리렌더링

• Props가 변경될 때
  • 부모 컴포넌트로부터 전달받은 props 값이 변경되면, 해당 값을 사용하는 자식 컴포넌트는 리렌더링된다.
• State가 변경될 때
  • 컴포넌트 내에서 useState 혹은 this.setState 등을 통해 상태가 바뀌면 리렌더링이 발생한다.
  • 예를 들어 setCount(count + 1)처럼 state를 업데이트하면, 해당 컴포넌트와 자식 컴포넌트가 새 상태에 맞춰 다시 그려진다.
• 부모 컴포넌트가 리렌더링될 때
  • 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링될 가능성이 높다(단, props 변화가 없으면 실제 DOM 업데이트로 이어지지 않을 수 있습니다).
  • React는 변경된 부분만 최소화하여 업데이트하기 때문에, 자식 컴포넌트 내의 React.memo나 PureComponent(클래스형 컴포넌트일 때) 등을 통해 불필요한 리렌더링을 줄일 수 있다.
• Context가 변경될 때
  • React.createContext로 만든 Context의 값이 변경되면, 그 Context를 구독(consume)하고 있는 모든 컴포넌트가 리렌더링된다.

2. React memo

React의 컴포넌트가 React.memo()로 래핑 되면, React는 컴포넌트를 렌더링하고 그 결과를 메모이제이션한다. 다음 렌더링이 일어날 때 props가 같다면, React는 메모이제이션된 내용을 재사용한다.

export function App(){

const [title,setTitle] = useState('movie1');
const [releaseDate,setReleaseDate] = useState('2022-8-09');

}

export function Movie({releaseDate}) {
  useEffect(() => {
    console.log('rendered');
  })
  return (
    <div>
      <div>Movie title: {title}</div>
      <div>Release date: {releaseDate}</div>
    </div>
  );
}

export default memo(Movie);

3. React memo 남용

그럼에도 React memo를 남용하면 성능이 나빠질 수 있는데 React.memo는 공짜가 아니다.

예를 들어보자

const SimpleText = React.memo(({ text }: { text: string }) => {
  return <span>{text}</span>; // 렌더링이 매우 빠름 (< 1ms)
});

// 매번 렌더링 시:
// 1. 이전 props와 현재 props를 비교 (얕은 비교)
// 2. 비교 결과에 따라 렌더링 skip 여부 결정
// props 비교 비용 > 렌더링 비용
// → 오히려 더 느려짐!