React - Hooks

React Hooks 개념 정리

React Hooks는 리액트 함수형 컴포넌트에서 "상태 관리"나 "라이프사이클 효과" 같은 기능을 사용할 수 있게 해주는 함수들이다. 이전에는 클래스 컴포넌트에서만 가능했지만, Hooks 덕분에 함수형 컴포넌트로도 모든 기능을 구현할 수 있다.

---

1. useState

컴포넌트 내부에서 상태를 관리할 수 있게 해주는 Hook이다.

const [count, setCount] = useState(0);

• count: 상태값
• setCount: 상태 변경 함수
• useState(0): 초기값 0

예: 버튼 클릭할 때 숫자 증가시키기

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      클릭 수: {count}
    </button>
  );
}

---

2. useEffect

컴포넌트가 렌더링된 후 실행되는 작업을 정의할 수 있는 Hook이다. 예: API 요청, 콘솔 로그, 타이머 설정 등

useEffect(() => {
  console.log("컴포넌트가 렌더링되었거나 count가 바뀜");
}, [count]);

• 두 번째 인자 [count]: 의존성 배열
• count 값이 바뀔 때마다 effect 함수가 실행됨

---

3. useRef

DOM 요소를 직접 제어하거나, 상태 변화 없이 값을 저장할 때 사용하는 Hook이다.

const inputRef = useRef(null);

<input ref={inputRef} />
<button onClick={() => inputRef.current.focus()}>포커스 이동</button>

또는 렌더링 없이 변수처럼 값을 보존하고 싶을 때 사용한다.

const renderCount = useRef(0);
renderCount.current += 1;

---

4. useMemo

복잡한 계산 결과를 기억(memoization)하여 성능을 최적화할 때 사용하는 Hook이다.

const expensiveValue = useMemo(() => {
  return computeSomething(a, b);
}, [a, b]);

• a나 b가 변경되지 않으면 이전 결과를 재사용한다.

---

5. useCallback

함수를 기억하여 불필요한 재생성을 막는 Hook이다. 특히 자식 컴포넌트에 함수를 props로 넘길 때 유용하다.

const handleClick = useCallback(() => {
  console.log("클릭!");
}, []);

---

6. useContext

Context API를 사용하여 전역 상태를 컴포넌트에서 쉽게 사용할 수 있도록 해주는 Hook이다.

const user = useContext(UserContext);

• 부모 컴포넌트에서 제공한 Context 값을 자식 컴포넌트에서 꺼내 쓸 수 있다.

---

7. useReducer

상태를 여러 단계로 관리하고 싶을 때 사용하는 Hook이다. Redux와 비슷한 구조를 가진다.

const [state, dispatch] = useReducer(reducer, initialState);

• reducer: 액션에 따라 상태를 변경하는 함수
• dispatch: 액션을 발생시키는 함수

---

정리 요약

Hook기능

useState	상태값 사용 및 변경
useEffect	사이드 이펙트 실행 (렌더 후)
useRef	DOM 참조 or 값 보존
useMemo	계산 결과 기억
useCallback	함수 기억
useContext	전역 상태 사용
useReducer	복잡한 상태 처리

---

각 Hook은 역할이 분명하며, 서로 조합하여 복잡한 UI 로직도 함수형 컴포넌트만으로 구현할 수 있다.