🤔 React props 리렌더링

이 글은 react가 리랜더링되는 상황 중 props가 업데이트되는 상황에 대해 내가 이해한 바를 정리한 글이다.

props가 업데이트될 때?

React가 렌더링되는 때는 다음과 같다.

1. state가 업데이트 되었을 때
2. 부모 컴포넌트가 렌더링 되었을 때
3. porps가 업데이트 되었을 때

이러한 경우 리액트는 리렌더링한다.

그런데, 3번에 해당하는 props가 변경되었을 때는 무엇을 의미하는 것일까?

내가 알기로는 props는 immutable data로 read-only이다. 그런데, props가 업데이트된다니?

이에 대한 해답은 아래와 같다.

새로운 props를 전달받다.

부모 컴포넌트에서 이벤트의 발생 혹은 함수의 실행으로 state가 변경되면 리랜더링이 발생하게 된다. 그때 하위 컴포넌트에 새로운 props값을 내려주게 된다.
새로운 props값을 받게된 하위 컴포넌트는 위에 적은 랜더링 상황 중 3번에 해당되기 때문에 리랜더링이 발생하게 되는 것이다. 하지만 문제는 같은 props를 받게되더라도 리랜더링이 발생한다는 것이다.

이러한 리랜더링의 빈번한 발생은 성능에 영향을 주기도 한다. 이를 방지하고자 react.memo()를 통해 불필요한 랜더링을 막아주기도 한다.

컴퍼넌트가 React.memo()로 래핑 될 때, React는 컴퍼넌트를 렌더링하고 결과를 메모이징(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 동일한 참조 값의 prop이 들어온다면, React는 메모이징(Memoizing)된 내용을 재사용하여 리랜더링을 방지시킨다.

App 컴포넌트

function App() {
  const [up, setUp] = useState(0);

  const upNum = () => {
    let num = up;
    setUp(num + 1);
  };

  return (
    <>
      <Home onUpClick={upNum} />
      <About up={up} />
      <Detail />

  {/* <Detail up={up} /> */}
  {/* Deatil 컴포넌트에서 사용하지 않아도, 
  이렇게 써주는 것만으로도 리렌더링을 발생시킨다*/}

   </>
  );
}

export default App;

Detail 컴포넌트

import React, { memo } from 'react';

const Detail = memo((props) => {
  console.log('detail render');
  return <div>this is detail</div>;
});

export default Detail;

위의 예시 코드를 보면

1. About 컴포넌트에서 click이벤트가 발생하면, up 상태가 1씩 커지면서 상태가 변화하게 된다.

2. 상태가 변경되어 리랜더링이 발생한다.

3. Detail 컴포넌트는 memo로 감싸줬고, 변경되는 state나 prop이 없기 때문에, 리렌더링이 발생하지 않는다.

그 결과, console에는 'detail render'이 한번만 찍히고, 이후에는 찍히지 않는 것을 확인 할 수 있다.

---

정리

리렌더링의 상황 중 props가 변경된다는 것은 부모 컴포넌트의 state가 바뀌어 리렌더링이 발생하고, 하위 컴포넌트에 props가 업데이트되어, 하위 컴포넌트도 리렌더링이 발생하게 되는 것이다.

하지만, react.memo() 등을 통해 불필요한 렌더링을 막아, 성능을 개선시킬 수 있는 것이다.