어제자 TIL에서 적은 React.memo()가 잘 와닿지 않았기 때문에 다른 내용을 더 찾아서 공부했다.
간단하게 정리하면 React에서 최초로 컴포넌트를 렌더링한 다음, 변화가 있을 때, 이전에 렌더링된 결과와 비교하여 변경이 있으면 React는 DOM을 업데이트한다. 이전 렌더링 결과와 다음 렌더링 결과의 비교의 속도는 빠르지만 더 빠르게 만들 수 있는 방법이 존재하는데, 그 방법이 바로 함수형 컴포넌트에 적용되어 같은 props의 같은 결과를 제공하는 React.memo()이다.
React.memo()를 언제 사용해야 하는가에 대한 답은 간단하다. props의 변경이 잘 일어나지 않는, 즉 같은 props로 자주 렌더링될 것이라고 예상될 때 사용하면 된다. 지난 몇 주간 코드숨 과제로 예시를 들어보면 식당 정보 페이지에서 식당의 메뉴들은 MenuItems라는 컴포넌트에서 menuItems라는 prop을 받는다. 근데, 이 식당의 메뉴는 DB에 저장된 정보를 출력하는 것이고 사용자가 추가, 수정, 삭제하는 것이 아니니까 prop의 변경이 잘 일어나지 않는다. 따라서 MenuItems라는 컴포넌트의 렌더링 결과를 메모이징하면 다음 렌더링 때 메모이징된 결과를 그대로 사용하기 때문에 React에서 가상 DOM에서 달라진 부분을 확인하지 않아 성능상의 이점을 누릴 수 있다. 앞으로 props의 변경이 잘 일어나지 않는 컴포넌트는 모두 React.memo()를 통해 성능 최적화를 이뤄봐야겠다.
'TIL' 카테고리의 다른 글
TIL - 20220623 ( 부제: webpack에 dotenv-webpack으로 환경 분리하기) (0) | 2022.06.23 |
---|---|
TIL - 20220622 (부제: Promise로 요청 한 번에 하기) (0) | 2022.06.22 |
TIL - 20220620 (0) | 2022.06.20 |
TIL - 20220619 (0) | 2022.06.19 |
TIL - 20220618 (부제: Github Actions를 위한 환경변수 설정) (0) | 2022.06.18 |