TIL - 20220621 (부제: React.memo()로 성능 최적화하기)

 어제자 TIL에서 적은 React.memo()가 잘 와닿지 않았기 때문에 다른 내용을 더 찾아서 공부했다.

 

 간단하게 정리하면 React에서 최초로 컴포넌트를 렌더링한 다음, 변화가 있을 때, 이전에 렌더링된 결과와 비교하여 변경이 있으면 React는 DOM을 업데이트한다. 이전 렌더링 결과와 다음 렌더링 결과의 비교의 속도는 빠르지만 더 빠르게 만들 수 있는 방법이 존재하는데, 그 방법이 바로 함수형 컴포넌트에 적용되어 같은 props의 같은 결과를 제공하는 React.memo()이다.

 

 React.memo()를 언제 사용해야 하는가에 대한 답은 간단하다. props의 변경이 잘 일어나지 않는, 즉 같은 props로 자주 렌더링될 것이라고 예상될 때 사용하면 된다. 지난 몇 주간 코드숨 과제로 예시를 들어보면 식당 정보 페이지에서 식당의 메뉴들은 MenuItems라는 컴포넌트에서 menuItems라는 prop을 받는다. 근데, 이 식당의 메뉴는 DB에 저장된 정보를 출력하는 것이고 사용자가 추가, 수정, 삭제하는 것이 아니니까 prop의 변경이 잘 일어나지 않는다. 따라서 MenuItems라는 컴포넌트의 렌더링 결과를 메모이징하면 다음 렌더링 때 메모이징된 결과를 그대로 사용하기 때문에 React에서 가상 DOM에서 달라진 부분을 확인하지 않아 성능상의 이점을 누릴 수 있다. 앞으로 props의 변경이 잘 일어나지 않는 컴포넌트는 모두 React.memo()를 통해 성능 최적화를 이뤄봐야겠다.