# React Hooks 개념 및 활용

React Hooks는 함수형 컴포넌트에서 상태 관리 및 생명주기 기능을 사용할 수 있도록 도와주는 기능입니다. 이번 글에서는 자주 사용하는 React Hooks에 대해 살펴보겠습니다.

---

## 1. React Hooks란?

React 16.8에서 도입된 Hooks는 클래스형 컴포넌트 없이도 상태와 생명주기 기능을 사용할 수 있도록 해줍니다.

### React Hooks의 특징
- **클래스 없이 상태 관리 가능**
- **코드의 가독성과 재사용성이 향상**
- **함수형 컴포넌트에서 로직을 쉽게 공유 가능**

---

## 2. useState: 상태 관리

`useState`는 컴포넌트 내에서 상태를 관리할 때 사용됩니다.

```tsx
import { useState } from "react";

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
};

export default Counter;
```

---

## 3. useEffect: 사이드 이펙트 관리

`useEffect`는 컴포넌트가 마운트, 업데이트, 언마운트될 때 특정 로직을 실행할 수 있도록 합니다.

```tsx
import { useState, useEffect } from "react";

const Timer: React.FC = () => {
  const [seconds, setSeconds] = useState<number>(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);
    
    return () => clearInterval(interval);
  }, []);

  return <p>경과 시간: {seconds}초</p>;
};

export default Timer;
```

---

## 4. useRef: DOM 요소 접근 및 값 유지

`useRef`는 DOM 요소에 접근하거나 컴포넌트가 리렌더링될 때 값을 유지할 때 사용됩니다.

```tsx
import { useRef, useEffect } from "react";

const InputFocus: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} placeholder="자동 포커스" />;
};

export default InputFocus;
```



React Hooks

자주 사용되는 리액트 훅 정리

FrontEnd

TypeScript

React Hooks

김동환