React.memo로 감싼 컴포넌트가 계속 렌더링 됩니다.

onClick으로 전달하는 () => history.push 함수로 인해 리렌더링 되는 것 같습니다. 참조 동일성의 개념을 아셔야하는데요, 리액트는 값을 비교하여 리렌더링 할 때 얕은 비교(Shallow Compare)를 합니다. 얕은 비교는 객체, 배열, 함수와 같은 참조 타입들을 실제 내부 값까지 비교하지 않고 동일한 메모리 값을 사용하는지(동일 참조인지)를 비교합니다. map으로 자식 컴포넌트가 생성될 때 새로운 메모리 값을 사용하는 함수가 onClick으로 전달되어 메모이제이션을 하지 못하고 리렌더링 되는 현상같아요. React.memo를 사용한다면, 함수를 props에서 바로 정의하지 말고, 부모 컴포넌트안에 정의한 뒤 useCallback으로 감싸서 전달하면 리렌더링이 발생하지 않을 것 같습니다. 코드로 간략하게 작성해봤습니다. const handleChildClick = useCallback(() => { history.push(...) }, []) <Child onClick={handleChildClick}/>