목록렌더링 (1)

bkdragon's log

반복되는 요소 렌더링 최적화 하기

할 일 목록을 지닌 todoContainer와 할 일 아이템을 개별적으로 보여주는 todoItem, 두 개의 컴포넌트가 있을 때 할 일 아이템을 추가하거나 삭제해서 todoContainer 가 리렌더링 되면 모든 todoItem이 리렌더링이 되는데 이걸 최적화 하고 싶었다. 최적화에 필요한 도구들은 이전 글 중에 정리해둔 부분이 있다. 헌데 그 글은 단순 이론이고 이번에 실전에 적용하면서 조금 더 디테일하게 다뤄보려고 한다. React 리렌더링 과정 리렌더링 과정을 세 단계로 구분 할 수 있다. 트리거 렌더링이 트리거되는 단계 state 값이 불변을 지켜 대체되었는지만 확인한다. 좀 더 자세히 이야기하면 기본형 변수일 땐 값이 변경되었는지만 확인, 참조형 변수일 땐 메모리 주소만 변경되었는지 얕은 비교를..
React 2023. 8. 5. 18:29
이전 Prev 1 Next 다음