React
2022-06-30
React hooks에 대해 알아보자
함수형 컴포넌트에서 기능을 추가할 때 사용하는 함수들(8가지) 핵심개념 정리
React hooks란?
함수형 컴포넌트에서 기능을 추가할 때 사용하는 함수들
1. useEffect
- 컴포넌트가 마운트 됐을 때(처음 나타났을 때), 언마운트 됐을 때(사라질 때), 그리고 업데이트 될 때(특정 props가 바뀔 때) 실행되는 hook
- API 호출, 이벤트 처리 등을 처리할 때 사용
2. useMemo
- 이전에 계산 한 값(랜더링한 함수 등)을 재사용하게 해줌
- 특정 결과값을 재사용 할 때 사용
- why? 성능 최적화
3. useCallback
- 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용
- useMemo와의 차이? useMemo는 함수를 실행, useCallback은 함수를 반환
4. useRef
- 특정 DOM 선택, 접근하기 위해서
- why? 특정 DOM에 적용하기 때문에 DOM을 선택해야 하는 상황이 발생
- 외부 라이브러리 사용할 때 등
5. useState
- 현재 컴포넌트에서 동적으로 변경되는 상태를 관리
6. useReducer
- 상태관리, 현재 컴포넌트가 아닌 다른 곳에 state를 저장하고 싶을 때 유용
- useState와 다르게 컴포넌트 바깥에 작성, 다른 파일에 작성 후 불러와서 사용
+ useState 차이점?
- 컴포넌트에서 관리하는 값이 딱 하나고, 그 값이 단순한 숫자, 문자열 또는 boolean 값이라면 확실히 useState로 관리하는게 편할 것
- 만약에 컴포넌트에서 관리하는 값이 여러개가 되어서 상태의 구조가 복잡해진다면 useReducer로 관리하는게 편할 것
7. useContext
- 컴포넌트 간 상태를 전달할 때 사용
- props로 전달하기에 코드중첩, 가독성 등 좋지 않음
- 중첩 구조가 복잡한 상황에서도 비교적 쉽게 데이터를 전달할 수 있다
8. reactDom portal
- 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 기능을 제공
-> 독립적인 구조를 가질 수 있음. 부모 컴포넌트의 제약에서 벗어날 수 있음. 왜? react 트리구조를 가지고 있기 때문에. 공식문서
+useSelector, useDispatch, useStore
Tags:
#React#hooks#useEffect#useMemo#useCallback#useRef#useReducer#useState#useContext#portals