[React] 리렌더링 조건

[yejun95]

리렌더링

• 리액트는 기본적으로 렌더링이 되어야 화면에 출력이 된다.

• 또한 안에 내용이 바뀌면 가상 DOM에 의해 해당하는 컴포넌트만 리렌더링이 된다.

• 때문에 리렌더링 조건을 알고 있어야 리액트를 정확하게 사용할 수 있다.
  

  ---

  
  

✔ 리렌더링 조건

• State(상태) 변경이 있을 때

  • useState() 함수를 말한다.
    

• 새로운 props가 들어올 때

  • 부모 컴포넌트로부터 새 props가 들어오면 자식 컴포넌트가 리렌더링 된다.
    

• 기존 props가 업데이트 됐을 때

  • 부모 컴포넌트로부터 받은 props가 업데이트되면 props 값을 받은 자식 컴포넌트도 리렌더링 된다.
    

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

  • 부모 컴포넌트가 업데이트되면 자식 컴포넌트도 업데이트 된다.
    

    ---

    
    

✔ 성능 최적화

• 앞선 리렌더링 조건들을 보았을 때, 분명 불필요하게 컴포넌트가 리렌더링 되는 경우가 생긴다.

  • ex) 부모만 업데이트하고 싶은데, 자식 컴포넌트도 자동으로 리렌더링 됨
    

• useMemo() 사용

  • 종속 변수가 변경되지 않았다면 해당 함수를 호출하지 않게 된다.
  • 함수의 종속 변수가 변경될때만 자식 컴포넌트가 리렌더링하게 만든다.
    

• useCallback() 사용

  • 자식 컴포넌트로 props를 넘길 때, useCallback을 사용
  • useMemo는 memoization된 함수를 넘겨주는 게 아닌 함수의 리턴 값을 넘겨주기 때문에, 함수 props의 불필요한 재렌더링은 막아줄 수 없다.
  • 부모 컴포넌트가 재렌더링할 때마다 동일한 props 값을 전달하더라도 새로운 콜백이 발생하고 때문에 자식 컴포넌트도 리렌더링을 하게 되는 경우가 발생한다.
  • 부모 컴포넌트가 재렌더링될 때마다 함수도 새로 생성되기 때문에, 자식 컴포넌트도 새로운 props로 인식하고 재렌더링하게 된다.
  • 이를 방지하기 위해서는 useCallback을 사용하여 함수의 값이 바뀌었을 때만 재렌더링 되도록 해야한다.
    

    ---

    
    

Reference

fnow : [React] 리액트 재렌더링 조건 & 렌더링 성능 최적화 방법