훅(Hooks)는 컴포넌드에서 서로 다른 리액트 기능을 사용하게 해줘요. 사용자는 리액트에 내장된 훅을 사용할 수도, 훅을 조합해서 새로운 훅을 만들수도 있어요. 이 페이지에서는 리액트에 내장된 모든 훅을 나열했어요.
State Hooks | 상태 훅
상태는 사용자의 입력 값 같은 정보를 컴포넌트가 기억하게 도와줘요. 예를 들어, 폼(form) 컴포넌트는 입력 값을 저장하기 위해 상태를 사용할 수 있어요. 이미지 갤러리 컴포넌트는 선택된 이미지의 인덱스를 저장하는데 사용할 수 있고요.
컴포넌트에 상태를 주입하기 위해서 아래의 훅들 중 하나를 사용하세요:
useState
는 즉시 수정할 수 있는 상태 변수를 선언해요.useReducer
는 리듀서 함수의 수정 로직을 가진 상태변수를 선언해요.
function ImageGallery() {
const [index, setIndex] = useState(0);
}
Context Hooks | 컨텍스트 훅
컨텍스트는 컴포넌트가 props 없이 원거리의 조상으로부터 컴포넌트가 정보를 받게 해줘요. 예를 들어, 앱의 최상위 컴포넌트는 현재 UI 테마를 깊이 상관 없이, 모든 하위 컴포넌트로 내릴 수 있어요.
useContext
는 컨텍스트를 읽고 구독해요.
function Button() {
const theme = useContext(ThemeContext);
}
Ref Hooks | 레프 훅
레프는 돔(DOM) 노드나 타입아웃 아이디(Timeout ID)와 같이 렌더링에 사용되지 않는 정보를 컴포넌트가 갖도록 해요. 상태(state)와는 달리 레프를 수정해도 컴포넌트가 리렌더링 되지 않아요. 레프는 리액트 페러다임에서 탈출할 수 있는 '비상구'예요. 레프는 브라우저 내장 API와 같이 리액트가 아닌 시스템을 사용할 때 유용해요.
useRef
는 레프를 선언해요. 값을 저장할 수 있지만 보통은 돔(DOM) 노드를 저장하는데 사용해요.useImperativeHandle
은 컴포넌트에서 노출된 레프를 커스터마이징할 수 있어요. 거의 사용되지 않아요.
function Form() {
const inputRef = useRef(null);
}
Effect Hooks | 이펙트 훅
이펙트는 외부 시스템과 연결하고 동기화시켜줘요. 네트워크, 브라우저 돔(DOM), 애니메이션, 다른 UI 라이브러리를 사용하는 위젯, 그리고 리액트가 아닌 코드까지 다룰 수 있어요.
useEffect
는 컴포넌트를 외부 시스템과 연결해요.
function Form() {
useEffect(() => {
const connection = createConnection(roomId);
connection.connect();
return () => connection.disconnect();
}, [roomId]);
}
이펙트는 리액트 페러다임에서 탈출할 수 있는 '비상구'예요. 애플리케이션의 데이터 흐름을 이펙트로 조작하지는 마세요. 외부 시스템과의 상호 작용이 없는 상황에서는 이펙트를 사용할 필요는 없을 거예요.
useEffect
에는 실행 시점이 다른 거의 사용되지 않는 두가지 변형이 있어요 :
useLayoutEffect
는 브라우저가 화면을 리페인트 하기 전에 실행돼요. 이 훅에서 레이아웃을 측정할 수 있어요.useInsertionEffect
는 리액트가 돔(DOM)에서 변경을 만들기 전에 실행돼요. 이 훅에서 라이브러리는 동적 CSS를 넣을 수 있어요.
Performance Hooks | 실행 훅
리렌더링의 실행을 최적화하는 가장 흔한 방법은 불필요한 작업은 넘어가는 것이에요. 이미 캐싱한 결과 값을 재사용하거나 이전 렌더링 시점 이후로 데이터의 변화가 없을 때 리렌더링을 하지 않도록 할 수 있어요.
계산이나 불필요한 리렌더링을 하지 않고 넘어가기 위해서는 다음 훅 중 하나를 사용하세요:
useMemo
는 비용이 많이 드는 계산의 결과를 캐싱해요.useCallback
은 함수 정의를 최적화된 컴포넌트로 전달하기 전에 저장해요.
function TodoList({ todos, tab, theme }) {
const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
}
때때로 화면이 실제로 업데이트가 되어야하기 때문에 리렌더링을 넘어갈 수 없을 때가 있어요. 이 경우에는 (인풋에 입력하는 것과 같이) 동기화되어야하는 블로킹 업데이트와 (차트 업데이트와 같이) 사용자 인터페이스를 막을 필요가 없는 논블로킹 업데이트를 구분하여 성능을 향상시킬 수 있어요.
렌더링 우선순위를 지정하기 위해서는 다음 훅 중 하나를 사용하세요:
useTransition
은 상태 전환을 논블로킹으로 표시하고 다른 업데이트가 상태 전환을 중단할 수 있도록 해요.useDeferredValue
는 UI적으로 중요하지 않은 부분의 업데이트를 연기하고 다른 부분이 먼저 업데이트 되도록 해요.
Resource Hooks | 자원 훅
리소스는 상태의 일부로 가지고 있지 않아도 컴포넌트에서 접근할 수 있어요. 컴포넌트는 Promise
를 통해 메시지를 읽거나 context
를 통해 스타일 정보를 읽을 수 있어요.
리소스에서 값을 읽어오려면 이 훅을 사용하세요:
use
는 Promise나 context와 같은 리소스의 값을 읽어요.
function MessageComponent({ messagePromise }) {
const message = use(messagePromise);
const theme = use(ThemeContext);
}
Other Hooks | 다른 훅
이 훅은 라이브러리 작성자에게는 유용하지만 애플리케이션 코드에서는 흔히 사용되지 않아요.
useDebugValue
는 React DevTools가 사용자 정의 훅을 표시하는 라벨을 커스텀해줘요.useId
는 컴포넌트가 자체적으로 고유 ID와 연결하도록 해줘요. 주로 접근성 API와 사용해요.useSyncExternalStore
은 컴포넌트가 외부 저장소를 구독하게 해줘요.
Your own Hooks | 고유 훅
여러분은 자바스크립트 함수로 여러분만의 커스텀 훅을 정의할 수 있어요.
'리액트 공식문서 | React Docs > Reference > react@18.2.0' 카테고리의 다른 글
[Hooks] useDebugValue | useDebugValue 훅 (0) | 2024.01.11 |
---|---|
[Hooks] useContext | useContext 훅 (2) | 2024.01.07 |
[Hooks] useCallback | useCallback훅 (2) | 2024.01.04 |
[Hooks] use | use 훅 (1) | 2023.12.28 |
[Overview] React Reference Overview | 리액트 공식문서 개요 (0) | 2023.12.19 |