[React JS] 고차 컴포넌트(HOC, Higher Order Component), React 메모이제이션 기능

🤸‍♀️HOC(HOC, Higher Order Component)가 뭔가요?

고차 컴포넌트(HOC)는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다. 

• HOC는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴입니다. 

const EnhancedComponent = higherOrderComponent(WrappedComponent);

컴포넌트와 고차 컴포넌트와의 차이점

• 컴포넌트는 props를 UI로 변환하는 반면, 고차 컴포넌트는 컴포넌트를 새로운 컴포넌트로 변환합니다. 

HOC은 언제 필요할까? 

• 규모가 큰 어플리케이션에서 동일한 패턴이 반복적으로 발생한다고 가정했을 때, 그렇게 된다면 로직을 한 곳에서 정의하고 많은 컴포넌트에서 로직을 공유할 수 있게 해주는 추상화가 필요하게 됩니다. 이 과정에서 사용되는것이 고차 컴포넌트입니다. 

about HOC

• 고차 컴포넌트는 입력된 컴포넌트를 수정하지 않으며 상속을 사용하여 동작을 복사하지도 않습니다. 오히려 고차 컴포넌트는 원본 컴포넌트를 컨테이너 컴포넌트로 wrapping하여 조합(compose)합니다.
• 고차 컴포넌트는 사이드 이펙트가 전혀 없는 순수 함수입니다. 
• 고차 컴포넌트는 데이터가 사용되는 이유 및 방법과 연관이 없으며 래핑된 컴포넌트는 데이터가 어디서부터 왔는지와 관련이 없습니다.
• HOC는 변경(mutation)대신에 입력 컴포넌트를 컨테이너 구성요소로 감싸서 조합(composition)을 사용해야 합니다.
• 고차 컴포넌트는 매개변수화된 컨테이너 컴포넌트 정의로 생각할 수 있습니다.
• 고차 컴포넌트는 모든 props를 래핑된 컴포넌트에 전달하는 것이 원칙이지만, refs에서는 작동하지 않습니다. 이는 React에서 ref가 실제 prop이 아닌 key처럼 특별하게 취급되기 때문입니다.

---

🤸‍♀️React 메모이제이션 관련 기능 

🙋‍♂️React.memo / useMemo / useCallback

[공통점]

• React.memo, useMemo, useCallback은 모두 불필요한 렌더링 또는 연산을 제어하는 용도로 성능 최적화에 그 목적이 있다.

[차이점]

• React.memo는 HOC이고, useMemo와 useCallback은 hook이다.
• React.memo는 HOC이기 때문에 클래스형 컴포넌트, 함수형 컴포넌트 모두 사용 가능하지만, useMemo는 hook이기 때문에 함수형 컴포넌트 안에서만 사용 가능하다.
• useMemo는 함수의 연산량이 많을때 이전 결과 값을 재사용하는 목적이고, useCallback은 함수가 재생성 되는것을 방지하기 위한 목적이다.  -> useCallback은 "함수"를  useMemo는 "값"을 메모이제이션합니다.

 

 

React 리렌더링 조건 3가지

• 자신의 state가 변경될 때
• 부모 컴포넌트로 전달받은 props가 변경될 때
• 부모 컴포넌트가 리렌더링될 때

예를 들어 props가 없는 순수 UI컴포넌트가 있을 때, 항상 같은 결과값을 return하여도 "부모 컴포가 리렌더링될 때 자식 컴포가 리렌더링된다"는 조건에 따라 항상 리렌더링된다.  -> 이때 사용하는것이 React.memo이다. 

 

memo는 컴포넌트를 메모이제이션해준다.

• 부모 컴포넌트로 넘겨받는 props가 같다면 메모이제이션해둔 렌더링 결과를 가져온다. 
• 주의점: 함수를 props로 넘겨주면 새로운 값이라고 인식하기 때문에 렌더링이 일어난다.

const MyComponent = React.memo(function MyComponent(props){
/* props를 사용하여 렌더링 */
});

function MyComponent(props){
/* props를 사용하여 렌더링 */
}
export default React.memo(MyComponent);
//이런 식으로 컴포넌트를 감싸주는 방식으로 사용하면 된다.

 

---

  개인적으로 위의 주제들은 개념을 이해하는 것도 중요하지만 본인의 코드에 직접 적용해봄으로써 이해도를 높일 수 있다고 생각합니다. 저는 개념을 봐도 정확히 어떤 기능을 하는 지 감이 잘 안오는 거 같아서 직접 코드에 적용해볼 생각입니다. 불필요한 리렌더링을 방지하는 용도에서 사용되는 아이들이니 정말 렌더링이 방지되는 지 눈으로 확인하는 작업도 필요하겠죠?

 

 

이미 만들어진 프로젝트에서의 렌더링 최적화는 첫째, state와 props의 변경을 최소화하는 것과 둘째, state와 props의 변경에 의해 불필요한 하위 컴포넌트 리렌더링을 최소화하는 것 두 가지 방향으로 진행됩니다.

+ 리액트 렌더링 최적화 8가지 방법 참고자료

https://cocoder16.tistory.com/36

+ 리액트 메모 현명하게 사용하기 

https://ui.toast.com/weekly-pick/ko_20190731