Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- nextjs route code
- TS
- react native 내부 구조
- 이펙티브 타입스크립트
- typeScript
- 애그리게이트
- react native bridge
- Aggregate
- DDD
- IAP
- BOUNDED CONTEXT
- 정처기 자격
- 이벤트 시스템
- nextjs사용이유
- 정처기 준비물
- 타입스크립트
- 정보처리기사
- HTML
- 빌딩 블록
- rn
- js
- nextJS
- nextjs 라우팅
- react natvie
- 속도개선
- rniap
- std::char_traits<unsigned char>
- 비동기
- in app purchase
- 불변식
Archives
- Today
- Total
nika-blog
React 최적화 with Hooks, Custom Hooks 본문
useEffect : side effect 처리할 때
useEffect는 모든 컴포넌트가 랜더링 후 상태변화, 구독, 타이머, 로깅 및 기타 side effect를 처리하는 데 도움이 됩니다. (라이프 사이클 매소드와 비슷하게 사용)
- useCallback : 함수가 재생성 되는 것 방지
deps 배열이 변경되지 않았다면 동일 주소값을 가진 함수를 재사용 가능. - 메모이제이션된 콜백을 반환하므로 부모 컴포넌트가 자식 컴포넌트의 렌더링을 방지하기 위해 자식 컴포넌트에 콜백을 전달할 때 매우 유용합니다.
useMemo: 함수의 연산량이 많을 때 이전 결과값을 재사용
- deps 배열 변경시에만 다시 계산.
- 메모이제이션된 콜백이 아닌 전달받은 함수의 메모이제션된 값을 반환합니다.
- 비싼 계산을 해야하는 잘 바뀌지 않는 값의 리렌더링을 방지할 때 유용합니다.
React.memo: 같은 props로 랜더링이 자주 일어날 때 이전 값 재사용
HOC(High-Order-Components)로서 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환하는 구조의 함수
custom hooks
개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있습니다.
커스텀 훅을 정의할 때는 useFetch, useInputs과 같이 함수 이름 앞에 use를 붙이는 것이 규칙이며 보통 프로젝트 내의 hooks 디렉토리에 커스텀 훅을 위치시킵니다.
'FE > React' 카테고리의 다른 글
React (0) | 2022.02.27 |
---|---|
React lifecycle, useEffect, react mount (0) | 2022.02.27 |
React 개념, 장점, 컴포넌트, 동작원리, virtual dom, reconciliation (0) | 2022.02.27 |
[React] react-router 의 location 객체 알아보기 (0) | 2021.09.05 |
[React] useSelector hook의 동작원리 알아보기 (0) | 2021.08.28 |