리액트 공식 문서를 참고한 정리 내용 (25.08 기준)
Hook을 이용하여 다양한 기능을 사용할 수 있으며, 이를 결합하여 자신만의 Hook을 만들 수 있다.
State Hooks
State를 통해 컴포넌트는 사용자 입력과 같은 정보를 기억할 수 있다.
컴포넌트에 State를 추가하려면, 아래의 Hook 중 하나를 사용하면 된다.
useState는 직접 업데이트 할 수 있는 State 변수를 선언한다.useReducer는 Reducer 함수 내부의 업데이트 로직을 사용하여 State 변수를 선언한다.
Context Hooks
Context는 컴포넌트가 Props를 전달하지 안혹도 멀리 있는 부모 컴포넌트로부터 정보를 전달받을 수 있게 해준다.
useContext는 Context를 읽고 구독한다.
Ref Hooks
Ref를 사용하면 컴포넌트가 DOM 노드나 Timeout ID와 같이 렌더링에 사용되지 않는 일부 정보를 보유할 수 있게 해주며, Ref는 State와 달리 업데이트를 해도 컴포넌트가 다시 렌더링되지 않는다.
Ref는 React 패러다임의 탈출구이며, 내장된 브라우저 API와 같이 React가 아닌 시스템으로 작업해야 할 때 유용하다
React 패러다임이란?
React는 선언형 UI 패러다임(상태 → UI)은 상태와 선언형 UI로 모든 걸 제어하려는 방식이다.
그런데Ref가 왜 탈출구일까?
가끔은 React가 관리하지 않는 세계와 상호작용해야 해는데, 이때 React 방식(상태로 선언 → 자동 렌더링)만으로는 제어하기 힘들다.
그래서Ref를 사용해 직접 DOM 노드나 값에 접근하는데, 이것을 탈출구라고 말한다.
React가 관리하지 않는 세계와 상호작용 예시
내장 브라우저 API (예:<canvas>에 직접 그림 그리기,video.play()호출하기,foucs()주기 등), 서드파티 라이브러리(예: jQuery 플러그인, 차트 라이브러리 등), DOM 요소 직접 접근(예: 스크롤 위치 가져오기, 특정 입력창 포커싱 등)
useRef는 Ref를 선언한다. 어떤 값이라도 담을 수 있지만, 주로 DOM 노드를 담는 용도로 사용된다.useImperativeHandle을 사용하면 컴포넌트에 노출되는 Ref를 커스텀할 수 있다. 드물게 사용된다.
Effect Hooks
Effect를 통해 컴포넌트를 외부 시스템에 연결하고 동기화할 수 있다. 여기에는 네트워크, 브라우저 DOM, 애니메이션, 다른 UI 라이브러리를 사용하여 작성된 위젯, 기타 React가 아닌 코드를 다루는 것이 포함된다.
useEffect는 컴포넌트를 외부 시스템에 연결한다.
이 친구도 마찬가지로 React 패러다임의 탈출구이기 때문에, 단순한 상태 관리나 데이터 흐름 제어에는 사용하면 안된다. 타이밍에 차이가 있는 useEffect의 두 가지 드물게 사용되는 변형이 있다.
useLayoutEffect는 브라우저가 화면을 다시 그리기 전에 실행된다. 여기에서 레이아웃을 계산할 수 있다.
(브라우저가 화면을 그리기 전[레이아웃 계산 이후] 실행됨 →useEffect는 그리고 나서 실행됨.)useInsertionEffect는 React가 DOM을 변경하기 전에 실행된다.
→ vue의beforeUpdate랑 살짝 비슷할지도..
→ DOM을 바꾸기 전에 CSS를 먼저 넣기 위한 용도. 즉,styled-component처럼 오래 걸리는 놈들을 위해 로딩 시간을 줄이겠다는 발악
Performance Hooks
재렌더링 방지를 위해 불필요한 작업을 건너뛰는 것이다. 예를 들어, 복잡한 연산이 필요한 값이나 함수들이 불필요하게 연산될 필요가 없을 경우에 캐싱 토대로 건너뛰기 한다 정도이다.
useMemo를 사용하면 비용이 많이 드는 계산 결과를 캐시할 수 있다.useCallback은 함수가 매번 새로 만들어지지 않게 기억해두었다가, 필요할 때 재사용하는 Hook이다.
최적화를 하더라도, 사용자의 입력처럼 즉시 화면에 반영되어야 하는 경우에는 재렌더링을 피할 수 없다. 이런 즉각적인 UI 갱신은 Blocking 업데이트라고 하고, 입력창이나 버튼 클릭처럼 지연되면 사용자 경험이 크게 나빠지는 상황을 말한다.
반대로, 차트 다시 그리기나 검색 결과 목록 갱신처럼 조금 늦어도 괜찮은 작업은 Non-Blocking 업데이트로 분류할 수 있다.
이렇게 React는 이 둘을 구분해 처리함으로써, 중요한 인터페이스는 즉각 반응하게 하고 무거운 작업은 뒤로 미뤄 성능과 사용자 경험을 모두 개선할 수 있다.
useTransition을 사용하면 State 전환을Non-Blocking으로 표시하고, 다른 업데이트가 이를 중단하도록 허용할 수 있다.useDeferredValue를 사용하면 UI의 중요하지 않은 부분에 대한 업데이트를 지연하고, 다른 부분이 먼저 업데이트되도록 할 수 있다. ⇒ 디바운스.. 여기에서 또 나오네…
Other Hooks
개발자만 사용함
useDebugValue를 사용하면 커스텀 Hook에 대해 React 개발자 도구에 표시되는 테이블을 커스텀할 수 있useId- 컴포넌트가 고유 ID룰 저산과 연결할 수 있다.useSyncExternalStore- 컴포넌트가 외부 저장소를 구독할 수 있다.useActionState- 액션을 통해 State를 관리할 수 있다.
