코드스테이츠 X 원티드 프리온보딩 FE 코스 Study 내용을 바탕으로 작성하였습니다.
React의 렌더링 시점
- props가 변경되었을 때
- state가 변경되었을 때
forceUpdate()를 실행했을 때- 부모 컴포넌트가 렌더링 되었을 때
위와 같은 과정에서 영향을 미치지 않는 부분의 업데이트로 인해 불필요하게 리렌더링이 발생한다면 성능손실이 발생할 수 있으며, 이를 방지하기 위해서는 컴포넌트가 최소한으로 렌더링되도록 최적화 작업이 중요하다.
리렌더링 최적화를 위한 hook으로는 useCallback, useMemo, useEffect가 있다.
1. useEffect
useEffect는 모든 컴포넌트가 렌더링된 후 side effect를 처리하는데 도움이 된다.
2. useCallback
useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다.
함수와 dependency 배열을 매개변수로 전달받으면 메모이제이션된 콜백을 반환하므로 부모 컴포넌트가 자식 컴포넌트의 렌더링을 방지하기 위해 자식 컴포넌트에 콜백을 전달할 때 유용하다.
컴포넌트가 리렌더링될 때마다 컴포넌트 내의 정의된 함수들은 이전에 생성된 함수와는 다른 주소값을 가진 함수를 매번 생성하는데 useCallback 사용시 dependency가 변경되지 않았다면 동일한 주소값을 가진 함수를 재사용할 수 있다.
3. useMemo
함수의 연산량이 많을 때 이전 결과값을 재사용하기 위해 사용된다.
함수와 dependency 배열을 전달받지만 전달받은 함수의 메모이제이션된 값을 반환한다. 그리고 dependency가 변경될때만 다시 계산한다.
4. React.memo
HOC(High-Order-Components)로서 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 구조의 함수이다.
useMemo, useCallback 과의 차이점
useMemo,useCallback과 같이 불필요한 렌더링 또는 연산을 제어하는 용도로 사용되지만 Hook이 아니라 HOC라는 점에서 클래스형, 함수형 컴포넌트 모두에서 사용이 가능하다.- React.memo는 props가 같을 시 컴포넌트 자체를 기억하며
useMemo,useCallback과 같은 hook들은 컴포넌트 자체가 아닌 렌더링 시의 함수 or 값을 기억한다.
HOC
: HOC란 리액트 컴포넌트를 arguments로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수이다. 코드의 반복을 줄이고, 컨테이너 컴포넌트(비즈니스 로직 담당)와 presentational 컴포넌트(뷰 담당)를 분리하기 위한 목적으로도 쓰인다.
참고자료
