React.memo 🌱

• 아래와 같이 자식 컴포넌트를 React.memo로 감쌌을 때 props를 통해서 전달되어지는 함수에 useCallback을 사용한 경우와 사용하지 않은 경우에 차이가 있나요?

function Parent(){
	const handleClick = useCallback(() => { ... }, []); // (1)
	const handleClick = () =>{ ... } // (2)

	return <Child onClick={handleClick} />
}

function Child({ onClick }) {
	return <div onClick={onClick} />
}
export default React.memo(Child);

=> React.memo로 감싸게 되면 props로 전달받은 값이 변화하지 않으면 렌더링을 발생시키지 않습니다.

useCallback을 사용하지 않은경우 부모 컴포넌트가 렌더링 될때마다 자식 컴포넌트도 재렌더링 됩니다.

useCallback을 사용하는 경우에는 부모 컴포넌트가 렌더링 되어도 자식 컴포넌트는 재렌더링 되지 않습니다.

 

useCallback을 사용하지 않는 경우에는 handleClick이 렌더링 시마다 값의 주소값이 변경되게 됩니다.

props로 전달받은 Child 컴포넌트에서는 주소값이 변경되었으므로 재렌더링을 발생시킵니다.

 

useCallback을 사용한 경우에는 의존성 배열의 값이 변하지 않으면 handleClick에는 새로운 주소값을 가지지 않습니다.

props로 전달되는 handleClick의 주소값이 변경되지 않았으므로 Child는 재렌더링 되지 않습니다.

React에서는 값의 비교에서 Object.is 알고리즘을 사용합니다.

 

• React.memo의 특징에 대해서 설명해주세요.

React.memo는 고차 컴포넌트 입니다.

일반 컴포넌트는 props를 ui를 반환하는 반면에 고차 컴포넌트는 새로운 컴포넌트를 반환합니다.

 

만약 컴포넌트가 동일한 props로 동일한 ui를 반환한다면 새로 컴포넌트를 렌더링 할 필요가 없게됩니다.

이때 React.memo를 사용하여 마지막 렌더링 결과값을 재사용 할 수 있습니다.

React.memo는 props의 변화에만 영향을 받습니다.

React.memo에는 인자를 두개 받을수 있습니다.

React.memo(component, fn)

만약 두번째 인자가 생략된다면 이전 props와 얕은 비교만을 수행합니다.

두번째 인자에 비교함수를 넣어 React.memo의 비교를 커스텀 할 수 있습니다.

function MyComponent(props) {
	// props를 사용하여 렌더링
}

function areEqual(prevProps, nextProps) {
  // nextProps가 prevProps와 동일한 값을 가지면 true를 반환하고, 그렇지 않다면 false를 반환
}

export default React.memo(MyComponent, areEqual);

 

 

https://ko.reactjs.org/docs/react-api.html

React 최상위 API – React