React.memo를 사용한 컴포넌트 리렌더링 방지

🔖 React.memo 를 사용한 컴포넌트 리렌더링 방지

📌 배운 내용 및 기억하고 싶은 내용

• React.memo : 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화하는 함수

  • 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정가능

  • export default React.memo(컴포넌트명j);
    

  • 최적화 할려면 함수형 업데이트를 사용해야한다.

  • 함수형 업데이트는 setState에 함수를 전달하는 것이다.

  • // 함수형 업데이트 적용전
    const [value, setValue] = useState(0);
          
    setValue(value + 1);
    setValue(value + 1);
    setValue(value + 1);
          
    // Expected value: 3
    // Result value: 1
          
    // 함수형 업데이트 적용후
    const [value, setValue] = useState(0);
          
    setValue(prev => prev + 1);
    setValue(prev => prev + 1);
    setValue(prev => prev + 1);
          
    // Expected value: 3
    // Result value: 3
    

  • 리액트 개발을 할때, useCallback, useMemo, React.memo 는 컴포넌트의 성능을 실제로 개선할수있는 상황에서만 해야한다.

  • 오직 성능최적화를 위하여 사용된다.

  • 렌더링을 방지하기 위해 사용하면 버그가 발생 할 수 있다.