[React.js]리액트에서 자주 쓰는 훅

 

리액트에서 자주 사용되는 주요 훅들은 useState, useEffect, useContext, useReducer, useRef가 있습니다. 각각의 훅과 사용 예시를 함께 정리해 보겠습니다.

---

1. useState

컴포넌트에서 상태를 관리하는 가장 기본적인 훅입니다.

• 사용법: [상태, 상태변경함수] = useState(초기값)

 

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // count 상태 변수와 상태 변경 함수 setCount 설정

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

이 훅은 간단한 숫자, 문자열, 배열 등 다 ㅈ양한 데이터 유형을 상태로 관리할 수 있습니다.

---

2. useEffect

컴포넌트의 생명주기 동안 특정 작업을 수행할 수 있는 훅입니다. componentDidMount, componentDidUpdate, componentWillUnmount의 역할을 대체합니다.

• 사용법: useEffect(콜백 함수, [의존성 배열])

 

 

import React, { useState, useEffect } from 'react';

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(prevTime => prevTime + 1);
    }, 1000);

    return () => clearInterval(interval); // 컴포넌트가 언마운트될 때 타이머 정리
  }, []); // 빈 배열은 마운트 시 한 번만 실행

  return <div>Timer: {time} seconds</div>;
}

useEffect는 데이터 가져오기, 타이머 설정, 이벤트 리스너 등록 및 해제 같은 작업에 유용합니다.

---

3. useContext

컴포넌트 트리에서 데이터를 전역으로 관리하고 공유할 때 사용하는 훅입니다. Context API와 함께 사용하며, props를 여러 단계에 걸쳐 전달하지 않고도 데이터를 자식 컴포넌트에 전달할 수 있습니다.

• 사용법: const contextValue = useContext(Context)

 

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light'); // 초기값 설정

function ThemedButton() {
  const theme = useContext(ThemeContext); // ThemeContext 값을 가져옴
  return <button className={theme}>Themed Button</button>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

useContext는 전역적으로 관리되는 데이터를 쉽게 사용하게 해 주어 테마나 사용자 정보 관리에 유용합니다.

---

4. useReducer

useState보다 복잡한 상태 로직이 필요할 때 사용하는 훅입니다. 주로 상태와 액션을 분리하여 Redux와 유사한 패턴으로 상태를 관리할 수 있습니다.

• 사용법: [상태, dispatch] = useReducer(리듀서 함수, 초기 상태)

 

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

useReducer는 복잡한 상태와 여러 상태 변경 작업을 관리할 때 유용합니다.

---

5. useRef

특정 DOM 요소에 접근하거나 컴포넌트가 리렌더링될 때 유지해야 하는 값에 접근할 수 있습니다. useRef로 생성된 객체는 컴포넌트가 리렌더링되어도 값이 유지됩니다.

• 사용법: const refContainer = useRef(초기값)

 

 

 

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus the input</button>
    </div>
  );
}

useRef는 DOM 조작이 필요한 경우나 이전 상태를 유지하고 싶은 경우에 유용합니다.

---

이 외에도 리액트에서는 useMemo와 useCallback 훅도 자주 사용됩니다.

이 훅들은 성능 최적화를 위해 특정 값이나 함수를 메모이제이션할 때 사용합니다.