# 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("컴포넌트가 마운트되었습니다.");
}, []);
```



리액트란?

리액트란 무엇인가

FrontEnd

TypeScript

리액트란?

김동환