React.memo() - props가 복잡한 object일 때

React.memo() 는 언제 사용하는가

리액트에서 memo 는 불필요한 컴포넌트 렌더링을 줄여 성능을 향상하는 좋은 기능이다.

memo는 Higher-Order Components 이다
memo는 API가 아니라, 기존의 컴포넌트를 새로운 컴포넌트로 바꾸어주는 것이다.

컴포넌트가 렌더될 때 이전 props와 같은 props라면 memo로 감싸주자.

그러면 메모리에 저장된 props와 비교해서 리렌더링이 필요없을 때는 스킵할 수 있다.

memo 는 props만 체크하기 때문에 , memo에 감싸진 컴포넌트 안의 다른 hooks가 기능한다면 props가 변하지 않았더라도 렌더링 된다.

props가 복잡한 object일 때

React.memo는 props를 shallowly compare(얕은 수준에서 비교) 하기 때문에
props가 복잡한 object일 때 문제가 될 수 있다.

const test = memo(( { data } ) => {
    const { id, password, name, address } = data;
    ...
    return ()
})

위와 같이 data가 복잡한 object일 때 그 안의 id, password, name, address가 변하지 않았더라도 렌더링 되는 것이다.

이럴 때는 memo의 두 번째 변수에서 props를 비교해 줄 수 있는 함수를 사용하면 된다.

const test = memo(( { data } ) => {
    const { id, password, name, address } = data;
    ...
    return ()
}
, (prevProps, nextProps) => JSON.stringify(prevProps) === JSON.stringify(nextProps)
)

두 번쨰 인자가 true이면 memo가 작동하고 false라면 작동하지 않을 것이다.