React.memo

React.memos를 이용하면 메모이제이션 기법으로 컴포넌트가 불필요하게 리렌더되는 상황을 방지할 수 있다.

 

고차컴포넌트 

고차 컴포넌트는 컴포넌트의 기능을 다시 사용하기 위한 리액트의 고급기술로, useMemo, useEffect처럼 use 키워드가 앞에 붙는 리액트 훅과는 다르다.

고차 컴포넌트는 인수로 전달된 컴포넌트를 새로운 컴포넌트로 반환하는 함수이다. 

 

고차컴포넌트를 이용하면 횡단 관심가 문제를 효율적으로 해결할 수 있다고 한다.

 

횡단 관심사

횡단 관심사란 크로스 커팅 관심사라고도 하는데, 프로그래밍에서 비즈니스 로직과 구분되는 공통 기능을 지칭할 떄 사용하는 용어이다.

횡단 관심사는 주로 로깅, 데이터베이스 접속, 인가 등 여러 곳에서 호출해 사용하는 코드들을 말한다.

 

컴포넌트의 핵심기능을 세로로 배치한다고 했을 때 여러 컴포넌트에서 공통으로 사용하는 기능은 가로로 배치하게 된다. 따라서 공통 기능들이 핵심 컴포넌트들을 마치 횡단 하는 모습니다.

그런데 여러 컴포넌트에서 횡단 관심사 코드를 작성하는 일은 중복코드를 만드는 주된 요인 중 하나이다.

고차 컴포넌트를 이용하면 횡단 관심사 코드를 함수로 분리할 수 있다.

 

 

React.memo

인수로 전달한 컴포넌트를 메모이제이션된 컴포넌트로 만들어 반환한다. 이때 props가 메모이제이션의 기준이 된다.

즉 React.memo가 반환하는 컴포넌트는 부모 컴포넌트에서 전달된 props가 변경되지 않는 한 리렌더 되지 않는다.

 

사용방법 

강화하고싶은 즉, 메모이제이션을 적용하고 싶은 컴포넌트를 React.memo로 감싸면 된다.

const memoizedComp=React.memo(comp);

위에 코드처럼 함수컴포넌트를 선언함과 동시에 메모이제이션하는 것도 가능하다. 

 

부모 컴포넌트가 리렌더링될 때, React는 해당 컴포넌트의 자식 컴포넌트도 함께 리렌더링 된다. 그러나 React.memo는 컴포넌트를 

렌더링 하는 동안 이전에 렌더링된 결과를 기억하고, 부모 컴포넌트가 업데이트되었을 때 해당 컴포넌트의 props가 변경되지 않았다면, 이전에 렌더링된 결과를 재사용하여 자식 컴포넌트의 불필요한 렌더링을 방지한다.

 

위에 문제를 방지하는 방법으로는 자식 컴포넌트를 내보낼 때 React.memo로 감싸면 된다. 

 

export default React.memo(Header);