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는 재렌더링을 막기위해 사용한다.
• 자식 컴포넌트에서 사용하는 props가 실제로 바뀌었다면, 그 자식 컴포넌트는 리렌더링(함수 재호출 및 DOM 업데이트)이 되어야 합니다. 이 경우에는 React.memo를 써도 “props가 바뀌었”기 때문에 재렌더링을 막을 수 없다.
  • 즉, 실제로 바뀐 props가 있는 자식 컴포넌트는 리렌더가 필요한 게 당연하고, 이 상황에서는 React.memo가 큰 효과가 없다.
• 부모 컴포넌트가 리렌더되면서 자식도 “함수는 다시 호출”될 수 있지만, 자식으로 전달되는 props가 이전과 동일하다면, 기본 React 동작에서는 “DOM 업데이트”는 없더라도 “함수 재호출”은 발생한다.
  • React.memo 는 이 부분에서 함수 재호출 자체도 스킵하여 “불필요한 연산”을 줄여준다.
  • 부모가 리렌더될 때마다 props가 변하지 않는데도 다시 불려야 하는 자식에 대해서는 React.memo로 불필요한 함수 호출까지 방지할 수 있으므로 의미가 있다.