React 기초

1. 리액트 기본 개념과 구조

리액트에서 웹 애플리케이션을 만들 때 가장 중요한 요소는 컴포넌트(Component)입니다.
컴포넌트는 쉽게 말해 웹 페이지의 특정 부분을 담당하는 조각입니다.

📌 리액트 프로젝트 기본 구조

my-app/
├── node_modules/       # 설치된 라이브러리
├── public/             # 정적 파일 (index.html 포함)
├── src/                # 소스 코드 (리액트 컴포넌트들)
│   ├── App.js          # 메인 컴포넌트
│   ├── index.js        # 프로젝트의 진입점
│   ├── components/     # 컴포넌트 모음 (별도로 분리 가능)
├── package.json        # 프로젝트 설정 파일
└── README.md           # 설명 파일

2. JSX 문법 (리액트의 HTML)

리액트에서는 JSX라는 문법을 사용합니다.
👉 JSX는 JavaScript 코드 안에서 HTML을 작성하는 문법입니다.

🔹 JSX 예제

✅ <h1>Hello, React!</h1>는 HTML처럼 보이지만 사실은 JSX 문법입니다.
✅ JSX를 사용하면 HTML과 JavaScript를 쉽게 결합할 수 있어요.

function MyComponent() {
  return <h1>Hello, React!</h1>;
}

 

🔹 JSX의 기본 규칙

 

1. 태그는 반드시 하나의 부모 요소로 감싸야 함

// ❌ 오류 발생
function MyComponent() {
  return (
    <h1>안녕하세요!</h1>
    <p>리액트를 배워봅시다.</p>
  );
}

// ✅ 올바른 코드 (div로 감싸기)
function MyComponent() {
  return (
    <div>
      <h1>안녕하세요!</h1>
      <p>리액트를 배워봅시다.</p>
    </div>
  );
}

 2. JSX에서 JavaScript 코드 사용하기

• {} 중괄호를 사용하면 JavaScript 표현식을 JSX 안에서 사용할 수 있습니다.

const name = "홍길동";
function MyComponent() {
  return <h1>안녕하세요, {name}님!</h1>;
}

 

3. class 대신 className 사용

• JSX에서는 class 대신 className을 사용해야 합니다.

// ❌ 오류 발생
<div class="container">Hello</div>

// ✅ 올바른 코드
<div className="container">Hello</div>

---

3. 리액트의 컴포넌트 (Component)

리액트의 핵심은 컴포넌트 기반 개발입니다.
컴포넌트는 두 가지 방식으로 만들 수 있습니다.

1) 함수형 컴포넌트 (Functional Component)

• 가장 많이 사용되는 방식 (React 16.8 이후부터 주로 사용)
• 함수처럼 작동하며 return을 사용해 UI를 반환함

function Welcome() {
  return <h1>안녕하세요!</h1>;
}

2) 클래스형 컴포넌트 (Class Component)

• 예전에는 많이 사용되었지만, 현재는 함수형 컴포넌트 + 훅(Hooks) 사용이 일반적

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <h1>안녕하세요!</h1>;
  }
}

✅ 요즘은 함수형 컴포넌트를 주로 사용하므로 함수형을 중심으로 학습하는 것이 좋습니다.

---

4. Props와 State (데이터 관리의 핵심)

리액트에서 데이터를 다룰 때 중요한 개념이 Props(속성)과 State(상태)입니다.

🔹 Props (부모 → 자식 컴포넌트 데이터 전달)

• 부모 컴포넌트에서 자식 컴포넌트로 값을 넘겨줄 때 사용

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

function App() {
  return <Greeting name="홍길동" />;
}

✅ props.name을 통해 부모 컴포넌트에서 전달한 값을 사용할 수 있습니다.

---

🔹 State (컴포넌트 내부에서 변경되는 데이터)

• useState를 사용해 동적으로 값이 변하는 데이터를 관리

import { useState } from "react";

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

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

function App() {
  return <Counter />;
}

✅ useState(0)을 사용하여 초기값을 0으로 설정
✅ setCount(count + 1)로 값 업데이트

---

5. 이벤트 핸들링 (버튼 클릭 등)

리액트에서 클릭, 입력 등의 이벤트를 처리하는 방법입니다.

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

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

✅ onClick={handleClick}으로 버튼 클릭 이벤트 설정
✅ 클릭하면 handleClick 함수가 실행됨

---

6. 리스트 렌더링 (map 사용)

리액트에서 배열 데이터를 화면에 표시할 때는 map()을 많이 사용합니다.

function NameList() {
  const names = ["철수", "영희", "민수"];

  return (
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li>
      ))}
    </ul>
  );
}

✅ map()을 사용해 배열을 반복 렌더링
✅ key 속성은 각 항목을 구분하는 고유 값 (리액트에서 필수)

---

7. 리액트 훅 (Hooks)

함수형 컴포넌트에서 상태와 생명주기 기능을 추가하는 기능입니다.

🔹 자주 쓰이는 훅

1. useState → 상태값을 관리
2. useEffect → 컴포넌트가 마운트될 때 실행

import { useState, useEffect } from "react";

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

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

    return () => clearInterval(interval);
  }, []);

  return <p>타이머: {time}초</p>;
}

✅ useEffect를 사용해 컴포넌트가 실행될 때 타이머 시작
✅ setInterval로 1초마다 setTime을 업데이트

---

📌 마무리

✔ JSX를 사용하여 HTML처럼 작성
✔ 컴포넌트를 만들어 재사용
✔ Props와 State를 활용해 데이터 관리
✔ 이벤트 핸들링 및 리스트 렌더링으로 동적 UI 구현
✔ useState, useEffect 같은 훅으로 상태 관리

본 글은 ChatGPT에서 제공한 내용을 바탕으로 정리한 글입니다.