3주차 — React(상세)

목표: 컴포넌트 기반 개발 방식을 이해하고, 상태 관리와 API 연동까지 직접 구현할 수 있다.

---

7회차 (2시간): React 시작

0:00~0:20 | SPA 개념, 프로젝트 생성

• SPA(Single Page Application): 페이지 전체를 다시 불러오지 않고 필요한 부분만 갱신

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

0:20~0:50 | JSX 문법

• HTML처럼 보이지만 JS 안에서 사용하는 문법. {}로 JS 표현식 삽입

const name = '민수';
function App() {
  return <h1>안녕하세요, {name}님</h1>;
}

0:50~1:20 | 컴포넌트

• 함수형 컴포넌트: 함수 하나 = 화면의 조각 하나

function UserCard() {
  return <div>사용자 카드</div>;
}

1:20~1:50 | props

function UserCard({ name, age }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{age}세</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <UserCard name="민수" age={25} />
      <UserCard name="지영" age={30} />
    </div>
  );
}

1:50~2:00 | 실습

• 정적 컴포넌트 여러 개 만들어서 조합

과제

• 상품 카드 컴포넌트 만들기 (props로 이름/가격/이미지 전달)

---

8회차 (2시간): 상태와 이벤트

0:00~0:30 | useState

import { useState } from 'react';

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

0:30~0:50 | 이벤트 핸들링

<input onChange={(e) => console.log(e.target.value)} />
<button onClick={() => alert('클릭됨')}>클릭</button>

0:50~1:10 | 조건부 렌더링

{isLoggedIn && <p>환영합니다</p>}
{isLoggedIn ? <p>환영합니다</p> : <p>로그인 해주세요</p>}

1:10~1:30 | 리스트 렌더링과 key

{todos.map((todo) => (
  <li key={todo.id}>{todo.text}</li>
))}

key는 React가 각 항목을 구분하기 위해 필요 (배열 인덱스보다는 고유 id 권장)

1:30~2:00 | 실습: Todo 앱

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    if (!input) return;
    setTodos([...todos, { id: Date.now(), text: input, done: false }]);
    setInput('');
  };

  const toggleTodo = (id) => {
    setTodos(todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
  };

  return (
    <div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={addTodo}>추가</button>
      <ul>
        {todos.map((todo) => (
          <li
            key={todo.id}
            style={{ textDecoration: todo.done ? 'line-through' : 'none' }}
            onClick={() => toggleTodo(todo.id)}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

과제

• Todo 앱에 삭제 기능 추가
• 완료/미완료 개수 표시

---

9회차 (2시간): useEffect & 실전 패턴

0:00~0:30 | useEffect 기본

useEffect(() => {
  console.log('컴포넌트 렌더링됨');
}, []); // 빈 배열 = 최초 1회만 실행

0:30~1:00 | API 데이터 fetch

import { useState, useEffect } from 'react';

function PostList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchPosts() {
      const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
      const data = await res.json();
      setPosts(data);
      setLoading(false);
    }
    fetchPosts();
  }, []);

  if (loading) return

로딩 중...

;
  return (

{posts.map((post) =>
• {post.title}
)}

  );
}

1:00~1:20 | 폼 다루기 (controlled input)

const [form, setForm] = useState({ name: '', email: '' });
<input
  value={form.name}
  onChange={(e) => setForm({ ...form, name: e.target.value })}
/>

1:20~1:40 | props drilling, react-router 소개

npm install react-router-dom

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

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

1:40~2:00 | 실습

• API 데이터를 받아와서 리스트로 렌더링하는 화면 만들기

과제

• 검색 input으로 리스트 필터링 기능 구현
• (선택) react-router로 페이지 2개 만들어 이동해보기

---

3주차 마무리 체크리스트

• [ ] JSX와 HTML의 차이를 설명할 수 있다
• [ ] useState로 상태를 관리하고 화면을 갱신할 수 있다
• [ ] map으로 리스트를 렌더링할 때 key가 왜 필요한지 설명할 수 있다
• [ ] useEffect로 API 데이터를 가져와 화면에 표시할 수 있다

3주차_React.md2.pdf

0.32MB