React 기초 및 기본정리

1. React란?

• UI 라이브러리: 사용자 인터페이스를 효율적으로 만들기 위한 JavaScript 라이브러리
• 컴포넌트 기반: UI를 재사용 가능한 컴포넌트 단위로 분리
• Virtual DOM: 변경된 부분만 효율적으로 업데이트

---

2. React 시작하기

설치 (Vite 예시)

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

폴더 구조 예시

src/
 ├─ App.jsx
 ├─ main.jsx
 └─ components/

---

3. JSX

• JavaScript + XML 문법
• 반드시 부모 태그로 감싸야 함
• JS 표현식은 {} 안에 작성

function Hello() {
  const name = "React";
  return <h1>Hello, {name}!</h1>;
}

---

4. 컴포넌트

• 함수형 컴포넌트가 기본
• props로 데이터 전달

 

function Welcome({ name }) {
  return <h2>안녕하세요, {name}님!</h2>;
}

// 사용
<Welcome name="홍길동" />

---

5. State

• 컴포넌트 내부 상태 관리
• useState 훅 사용

 

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  );
}

 

---

6. 이벤트 처리

function Button() {
  const handleClick = () => alert("클릭됨!");
  return <button onClick={handleClick}>클릭</button>;
}

 

 

---

7. 조건부 렌더링

{isLogin ? <p>로그인 완료</p> : <p>로그인 필요</p>}

---

8. 리스트 렌더링

const users = ["Tom", "Jane", "Mike"];

<ul>
  {users.map((u, i) => <li key={i}>{u}</li>)}
</ul>

---

9. useEffect

• 컴포넌트가 렌더링될 때 부수효과 처리(데이터 요청, 구독 등)

 

import { useEffect } from 'react';

useEffect(() => {
  console.log("마운트 시 실행");
  return () => console.log("언마운트 시 실행");
}, []);

 

---

10. Props vs State

• Props: 부모 → 자식으로 전달, 읽기 전용
• State: 컴포넌트 내부에서 관리하는 값, 변경 가능

---

11. React Router (페이지 이동)

 

npm i react-router-dom

 

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">홈</Link>
        <Link to="/about">소개</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

 

---

12. 핵심 요약

• React는 컴포넌트 기반 UI 라이브러리
• JSX로 UI 작성
• props로 데이터 전달, state로 상태 관리
• useEffect로 비동기/사이드 이펙트 처리
• Router를 이용해 SPA 방식으로 페이지 전환