# 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

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

# React 기본 개념

React는 페이스북이 개발한 자바스크립트 라이브러리로, UI를 효율적으로 구축하기 위해 사용됩니다. 이번 글에서는 React의 기본 개념을 살펴보겠습니다.

---

## 1. React란?

React는 컴포넌트 기반의 UI 라이브러리로, **단방향 데이터 흐름**과 **가상 DOM**을 활용하여 성능을 최적화합니다.

### React의 주요 특징
- **컴포넌트 기반**: UI를 작은 단위의 컴포넌트로 분리하여 재사용이 용이합니다.
- **선언형**: 코드가 직관적이며, 상태(state)에 따라 자동으로 UI가 갱신됩니다.
- **가상 DOM**: 변경 사항을 효율적으로 반영하여 렌더링 성능을 향상합니다.
- **단방향 데이터 흐름**: 데이터가 일관되게 관리되어 디버깅이 용이합니다.

---

## 2. React 프로젝트 설정

### 1) Create React App

```sh
npx create-react-app my-app
cd my-app
npm start
```

### 2) Vite

```sh
npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev
```

---

## 3. JSX

React에서는 JSX 문법을 사용하여 HTML과 유사한 코드를 작성할 수 있습니다.

```jsx
const element = <h1>Hello, React!</h1>;
```

JSX는 일반 자바스크립트가 아닌 확장 문법이므로, JSX 코드는 Babel을 통해 변환됩니다.

---

## 4. 컴포넌트(Component)

컴포넌트는 UI의 독립적인 단위로, 재사용이 가능합니다.

### 1) 함수형 컴포넌트
```jsx
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}
```

### 2) 클래스형 컴포넌트
```jsx
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}
```

---

## 5. Props와 State

### 1) Props (속성)
- 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용합니다.

```jsx
function Greeting(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

<Greeting name="Alice" />
```

### 2) State (상태)
- 컴포넌트 내부에서 관리하는 동적인 데이터로 값이 setState함수로 값이 변경될 경우 컴포넌트가 리랜더링됩니다.

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

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

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

---

## 6. 이벤트 핸들링

```jsx
function ButtonClick() {
  function handleClick() {
    alert("버튼이 클릭되었습니다!");
  }

  return <button onClick={handleClick}>클릭하세요</button>;
}
```

---

## 7. 조건부 렌더링

```jsx
function UserGreeting(props) {
  return <h1>{props.isLoggedIn ? "환영합니다!" : "로그인해주세요."}</h1>;
}
```

---

## 8. 리스트 렌더링

배열 데이터를 기반으로 동적으로 UI를 생성할 수 있습니다.

```jsx
function ItemList() {
  const items = ["사과", "바나나", "체리"];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
```

---

## 9. Hooks

React에서는 상태 관리와 생명주기 메서드를 쉽게 사용할 수 있도록 **Hooks** 기능을 제공합니다.

### 1) `useState` (상태 관리)
```jsx
const [count, setCount] = useState(0);
```

### 2) `useEffect` (사이드 이펙트 관리)
```jsx
useEffect(() => {
  console.log("컴포넌트가 마운트되었습니다.");
}, []);
```



게시글 리스트

React Hooks

리액트란?