[React] Re-Rendering과 Memoization

프론트엔드 성능 개선을 위해 리액트 컴포넌트의 리렌더링 제어하기

 

Re-Rendering이 발생하는 세 가지 조건

1. State가 업데이트된 컴포넌트

2. Props가 변경된 컴포넌트

3. Re-Rendering 된 컴포넌트 아래의 모든 컴포넌트

이 중 3번의 경우, 리렌더링 된 어떤 컴포넌트 아래의 자식 컴포넌트들은 불필요한 렌더링이 일어난다.

메모이제이션을 통해 이전 처리 결과를 저장해둠으로써 처리 속도를 높일 수 있다.

 

React.memo

const Component = memo(() => {});

이렇게 컴포넌트를 괄호로 감싸면 해당 컴포넌트는 Props에 변경이 있을 때만 리렌더링 된다.

하지만 Props에 함수를 전달할 때는 memo를 사용해도 컴포넌트가 리렌더링된다.

 

React.useCallback

함수를 Props에 전달할 때는 컴포넌트를 메모이제이션해도 함수가 다시 생성되기 때문에, 자식 컴포넌트의 Props가 변화되었다고 보고 리렌더링이 일어난다.

const handleClick = useCallback(() => {}, []);

useCallback은 useEffect와 같은 의존 배열을 받는다.

의존 배열이 비어 있을 때는 처음 작성된 것을 재사용하게 되고,

값을 설정했을 때는 그 값이 변경되는 시점에 다시 사용된다.

 

React.useMemo

변수 정의 로직이 복잡하거나 많은 수의 루프가 실행되는 경우 등에 사용하면 변수 설정에 의한 부하를 낮출 수 있다.

const sum = useMemo(() => { return 1 + 3; }, []);

의존 배열 사용법은 같다.

의존 배열에 설정된 값을 참조함으로써 변수를 설정하는 데 영향을 주는 외부값을 명시적으로 나타낼 수 있어 가독성 향상을 기대할 수 있다.

 

 

 

---

글 작성하다 알게 된 건데

메모이제이션이라는 단어가 따로 사전적 뜻이 있는 건 아니고 컴퓨터 용어라고 한다.

memoization 이라고 적으니 빨간 줄이 떠서 알게 되었다.

예전에 알고리즘 문제 풀 때나 들었던 단어인데 ... ^_^

 

마침 얼마 전 진행했던 사이드 프로젝트도 이제 끝나고 리팩토링 해야하는데,

memo, useCallback 같은 거 써봐야지 싶어서 책 읽는 김에 간단히 정리해 보았다.

 

 

출처: 모던 자바스크립트로 배우는 리액트 입문 -오카다 다쿠미 지음