chrome 확장 프로그램 react developer tools 넘나 좋군
리액트 개발팀 분들아... 고맙다 ...
useCallback
리액트 렌더링 성능을 위해 제공되는 훅. 컴포넌트가 렌더링 될 때마다 함수를 생성해서 자식 컴포넌트의 속성으로 넘겨준다. on~~함수 값이 매번 다르게 되어 매번 렌더링이 되는데, 재 렌더링을 방지하기 위해 사용함. 첫번째 파라미터 - 기존함수두번째 파라미터 - []배열 *두번째 파라미터 배열 값에 함수가 재생성할 기준을 할당. if 다른 변수를 참조하게 된다면 그 변수들을 두번째 파라미터 배열값으로 넣어줌. => 해당 함수는 파라미터가 바뀔 때만 재 생성하게 됨.
데이터 렌더링 , 최적화
하나 항목 업데이트 렌더링 시간 너무 김.
*느려지는 원인 분석
todo1 체크 시 App 컴포넌트 state 변경 -> 리렌더링.
부모 컴포넌트 리렌더링 -> TodoList 컴포넌트 리렌더링 -> TodoList 안에 import 되어있는 많은 컴포넌트 리렌더링
: 불필요한 작업, 즉 리렌더링 불필요할 때 리렌더링 방지 작업 필요
성능 최적화 방법은?
1> React.memo를 사용한 컴포넌트 성능 최적화
-> TodoListitem 컴포넌트는 todo, onRemove, onToggle이 바뀌지 않으면 리렌더링 하지 않음.
but, todos 배열 업데이트 -> onRemove와 onToggle 함수도 새롭게 바뀜
최신상태의 todos를 참조하여 todos 배열이 바뀔 때마다 함수 새로 만들어짐.
2> onToggle, onRemove 함수 바뀌지 않게 하는 두가지 방법
1. useState 함수형 업데이트 기능 사용
기존 setTodos 함수 사용시 새로운 상태 파라미터로 넣어주었지만
대신에 상태 업데이트를 어떻게 할지 정의해주는 업데이트 함수를 넣을 수도 있음 : 함수형 업데이트
앞에 todos=> 만 추가적으로 붙여주면 됨.
2. useReducer 사용
import {useReduer}
엄청 빨라진걸 확인할 수 있다!!!
useReducer가 훨씬 귀찮은데... 일단 내 컴퓨터에서는 첫번째 방법보다 성능 좋은듯
list 관련 컴포넌트 작성할 때 리스트 아이템과 리스트 이 두가지 컴포넌트 최적화 잊지 말기!
데이터 100개 넘지 않거나 업데이트 자주 발생하지 않는다면 반드시 필요하지는 않음.
'FE > React & TS' 카테고리의 다른 글
redux-actions, immer, hooks(useSelector, useDispatch)를 사용한 container component 생성 (1) | 2023.10.10 |
---|---|
Redux를 활용한 투두리스트 구현 (0) | 2023.10.10 |
Sass / styled-components (0) | 2023.05.16 |
[REACT Movie App part-two] React-router / react-router-dom (0) | 2023.05.11 |
[REACT Movie App part-one] fetch / async / await / axios / Cannot read properties of undefined (reading 'map') 오류 (0) | 2023.05.11 |