[Hooks] Hooks | 리액트 내장 훅

훅(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 | 고유 훅

여러분은 자바스크립트 함수로 여러분만의 커스텀 훅을 정의할 수 있어요.

 

 

원본보기