최적화

[React] 컴포넌트 성능 개선 React.memo()

1.React.memo란? React.memo는 함수형 컴포넌트에서 동일한 파라미터로 생성된 함수들을 메모이제이션을 이용하여 재사용하게 도와 줍니다. 예를 들어 다음과 같은 상황이 있다고 가정해보겠습니다. 이름, 나이, 주소값을 받는 useState를 이용해 표현하고 있고 주소를 제외한 이름, 나이를 파라미터로 받는 컴포넌트가 있습니다. 여기서 이름, 나이 값이 변경되면 해당 값을 가져다 사용하는 컴포넌트도 당연히 리 렌더링이 발생되어 수정된 화면을 보여줘야 합니다. 하지만 주소값이 변경될 경우에는 어떨까요? 주소 값이 변경되더라도 useState로 정의된 값들을 같이 리 렌더링이 발생되기 때문에 이름,나이,값이 동일함에도 불구 하고 해당 값들을 가져다 사용하는 컴포넌트도 리 렌더링이 발생됩니다. 결국 ..