1. 전제 조건
1) 함수형 컴포넌트와 Hook을 사용한다.
2) Redux를 사용한다면, 마찬가지로 connect 함수가 아닌 Hook을 사용하여 Store에 접근한다.
2. 렌더링 성능 최적화 Tip
1) 기본
React.memo 함수를 이용하여 컴포넌트를 래핑 한다. 즉, 해당 컴포넌트가 전달받는 props 값들의 참조값이 변하지 않았다면 컴포넌트 함수를 다시 호출하지 않고 기존의 결과물을 그대로 사용하도록 한다.
2) props가 존재하지 않는 컴포넌트
React.memo 함수를 사용하되, 이 함수의 두 번째 인자로 넘기는 비교 함수로는 () => true를 사용한다. 이는 props 값들의 참조값 비교 결과가 항상 '같다'라는 것을 의미하여 언제나 기존의 결과물을 그대로 사용하도록 한다. props가 존재하지 않는다면 부모에 의해 리렌더링이 유발되더라도 렌더링 되는 내용이 바뀔 일이 없기 때문이다.
그런데 props는 없지만 해당 컴포넌트가 지역 상태를 가지거나(useState) 특정 Context를 참조하는(useContext) 경우는 어떠할까? 이 경우에도 마찬가지이다. React.memo 함수는 부모에 의해 해당 컴포넌트의 리렌더링이 유발되는 경우만을 다룰 뿐이기 때문이다. 어차피 지역 상태가 바뀌거나 특정 Context의 참조값이 바뀌는 경우에는 React.memo 함수와 무관하게 해당 컴포넌트의 리렌더링이 유발된다.
3) props 중 "파라미터"만 렌더링에 영향을 주는 컴포넌트
React.memo 함수를 사용하되, 이 함수의 두 번째 인자로 넘기는 비교 함수로는 comparePropsParams를 사용한다. 여기서 comparePropsParams는 인자로 전달받는 두 개의 props 객체에 대하여 각각의 match.params가 동일한 값들을 가진 객체인지 비교하도록 직접 구현해야 하는 함수이다. 일반적으로 ID 값에 따라 URL의 파라미터 부분만 달라지는 상세 페이지 같은 곳에 사용하면 좋다.
4) props 중 "쿼리스트링"만 렌더링에 영향을 주는 컴포넌트
React.memo 함수를 사용하되, 이 함수의 두 번째 인자로 넘기는 비교 함수로는 comparePropsSearch를 사용한다. 여기서 comparePropsSearch는 인자로 전달받는 두 개의 props 객체에 대하여 각각의 location.search가 동일한 값을 가지는지 비교하도록 직접 구현해야 하는 함수이다. 일반적으로 검색 결과에 따라 URL의 쿼리 스트링 부분만 달라지는 리스트 페이지 같은 곳에 사용하면 좋다.
파라미터와 쿼리 : 페이지 주소를 정의 할 때, 우리는 유동적인 값을 전달해야 할 때도 있다.
이때 파라미터와 쿼리로 나눠지는데 무조건 따라야 하는 규칙은 없지만, 일반적으로는 파라미터는 특정 id 나 이름을 가지고 조회를 할 때 사용하고, 쿼리의 경우엔 어떤 키워드를 검색하거나, 요청을 할 때 필요한 옵션을 전달 할 때 사용한다.
- 파라미터: /profiles/velopert
- 쿼리: /about?details=true
5) props 중 특정 값의 깊은 비교가 필요한 경우
React.memo 함수를 사용하되, 이 함수의 두 번째 인자로 넘기는 비교 함수로는 깊은 비교 함수를 사용한다. 여기서 깊은 비교 함수란 인자로 전달받는 두 개의 객체에 대해 깊은 비교를 수행하는 함수를 말한다. 필자의 경우 react-fast-compare 라이브러리에서 제공하는 isEqual 함수를 사용하였다. 일반적으로 전달받는 객체의 참조값은 변하지만 객체의 내용 자체는 변하지 않는 경우에 불필요한 리렌더링이 유발되는 것을 막기 위해 사용하면 좋다.
6) 자식 엘리먼트를 렌더링에 사용(인라인 함수/객체를 렌더링에 사용)하는 경우
React.memo 함수를 사용하지 않는 것이 더 효율적이다. 자식 엘리먼트는 React 엘리먼트의 일종으로 매번 참조값이 달라지는 객체이기 때문에 어차피 항상 리렌더링이 유발되어야 한다. 따라서 불필요한 비교 연산으로 시간을 낭비할 필요가 없다.
3. 참고)useState 함수와 useContext 함수
컴포넌트 렌더링 성능 최적화의 측면에서 이 둘을 정리해 보자. 다시 한 번 강조하자면, React.memo 함수는 오직 부모에 의해 해당 컴포넌트의 리렌더링이 유발되는 경우만 다루는 것이다. 즉, 오직 부모에 의해 리렌더링이 유발되려 할 때 props의 변화만 검사하는 역할이라고 보면 된다. 그리고 useState 함수와 useContext 함수는 이와 완전히 별개로 리렌더링을 유발한다. 다시 말해서, React.memo 함수와는 무관하게 지역 상태가 바뀌거나 참조하는 Context의 참조값이 바뀌면 어차피 리렌더링을 유발하는 것이다. 따라서 React.memo 함수를 사용할 때는 오로지 부모에 의해 리렌더링이 유발되는 순간의 props의 변화만 생각하면 된다. 참고로, Redux에서 제공하는 useSelector, useParams, useLocation 함수는 모두 useContext 기반이기 때문에 useContext와 마찬가지로 생각하면 된다.
