Rendering1 useMemo, React.memo, 컴포넌트 분리를 통한 렌더링 최적화 일기 계기 현재 기획에 각 Todo에 대한 소요시간을 측정하는 기능이 있었다. 초 단위로 timer를 설정하려고 했기 때문에, start 버튼을 누르고 end를 누를 때까지 timer가 계속 작동한다. 이를 화면에 표시하기 위해 소요시간을 state로 관리했으며, '소요시간' 출력 부분이 1초마다 리렌더되어야 하므로 리렌더 범위를 최소화하고자 했다. 1. React.memo 사용 최하위 컴포넌트들 (Button, Text 등)은 부모 컴포넌트가 바뀌었을 때에 무조건 렌더링된다. 자녀 컴포넌트가 변하지 않았는데 불필요한 렌더링을 계속 하는 문제를 React.memo로 해결할 수 있다. 최적화된 컴포넌트를 리턴하여 렌더링이 될 상황에 Prop check 수행, Props 변화가 있을 때만 렌더링하도록 설정함. e.. 2022. 11. 27. 이전 1 다음
