리액트 공식 문서(react.dev) 읽기
Built-in React Hooks
1. useTransition
📍 React.dev
먼저, 아직 베타 사이트였던 React Docs Beta 가 23년 3월 16일 부로 공식 홈페이지로 변경됐다
- 그리고, 레거시 사이트 (reactjs.org) 에 접속하면, 새로운 react.dev 로 리디렉트된다
📍Built-in React Hooks 개요
- 훅은 컴포넌트에서 여러 리액트 기능을 사용할 수 있게 해준다 (컴포넌트 내부에서만 사용가능)
- 내장 훅을 조합해서 새로운 커스텀 훅을 만들 수 있다
📍State Hooks
✅상태는 컴포넌트가 정보(예 - 유저 입력)를 기억하게 한다
예) form 컴포넌트가 input value를 상태로 저장
✅컴포넌트에 상태를 추가하려면, 아래 2가지 훅 중 하나를 사용한다
- useState : 즉시 업데이트 가능한 상태 변수를 선언
- useReducer : reducer 함수 내부에 업데이트 로직을 가진 상태 변수를 선언
📍Context Hooks
✅컨텍스트는 props로 전달받지 않고도 컴포넌트가 멀리 떨어진 부모 컴포넌트로부터 정보를 직접 받게 해준다
- useContext : context를 읽고, 구독
📍ref Hooks
✅ref는 컴포넌트가 렌더링에 사용되지 않는 정보를 보유하게 한다
예) DOM 노드, timeout ID
- 상태와 다르게, ref를 업데이트해도 리렌더링이 발생하지 않는다
- 리액트 외부 시스템 (예 - 브라우저 API) 을 사용할 때 자주 쓰인다
- useRef : ref를 선언하고, 어떤 값이든 ref에 담을 수 있다.
주로 ref는 DOM 노드를 보관하는데 쓰인다
- useImperativeHandle : 컴포넌트에 의해 노출된 ref를 커스터마이징할 수 있다 (잘 안쓰임)
📍Effect Hooks
✅이펙트는 컴포넌트가 외부 시스템과 연결하고 동기화하게 해준다
- 네트워크, 브라우저 DOM, 애니메이션, 다른 UI 라이브러리를 사용하여 만들어진 위젯, non-React code 를 다룸
- 데이터 흐름을 조율하기 위해 이펙트를 사용하지 말것 (data fetching 용도로 쓰지 말 것?)
- 외부 시스템과 상호작용하지 않는다면, 이펙트가 필요없는 것이다
- useEffect : 컴포넌트를 외부 시스템과 연결한다
- useLayoutEffect : 브라우저가 화면을 리페인트하기 전에 실행된다 (레이아웃 측정 가능)
- useInsertionEffect : 리액트가 DOM을 변경하기 전에 실행된다.
라이브러리들이 여기에서 동적 CSS를 삽입할 수 있다
📍Performance Hooks
✅리렌더링 성능을 최적화하는 가장 일반적인 방법은 불필요한 동작을 생략하는 것이다
예) 이전 렌더링 이후 데이터가 변경되지 않은 경우 리렌더링을 생략
- useMemo : 값을 캐싱할 때 사용
- useCallback : 함수를 캐싱할 때 사용
✅blocking 업데이트와 non-blocking 업데이트를 구분하여 최적화를 진행해야 할 경우도 있다
- blocking 업데이트 : 동기적 (예 - input 엘리먼트에 타이핑)
- non-blocking 업데이트 : UI를 blocking하지 않고 기다렸다가 변경 (예 - 차트 변경)
렌더링의 우선순위를 지정하려면 아래 훅을 사용한다
- useTransition : 상태를 non-blocking transition으로 표시하여 다른 업데이트가 먼저 실행되게 함
- useDeferredValue : UI의 중요하지 않은 부분 업데이트를 연기하고 다른 부분이 먼저 업데이트되도록 함
📍기타 훅
✅라이브러리를 작성할 때 쓰이며, 어플리케이션 코드에서는 잘 안쓰임
- useDebugValue : 커스텀 훅에 대해서 React DevTools 표시 레이블을 커스터마이징
- useId : 컴포넌트가 고유 ID를 갖게함. 주로 접근성 API 들과 함께 사용됨
- useSyncExternalStore : 컴포넌트가 외부 store를 구독하게 해줌