3주차 — React

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

---

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

학습목표

• SPA와 컴포넌트 개념을 이해한다.
• JSX 문법으로 화면을 구성할 수 있다.
• props로 컴포넌트 간 데이터를 전달할 수 있다.

시간 배분

시간 내용

0:00~0:20	SPA(Single Page Application) 개념, React 프로젝트 생성(Vite)
0:20~0:50	JSX 문법 (HTML과의 차이, 중괄호 표현식)
0:50~1:20	컴포넌트 개념, 함수형 컴포넌트 작성법
1:20~1:50	props로 데이터 전달, props 구조 분해
1:50~2:00	실습: 정적 컴포넌트 여러 개 만들어서 조합

예제 코드

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>
  );
}

export default App;

과제

• 상품 카드 컴포넌트를 만들어 props로 이름/가격/이미지를 받아 표시하기

---

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

학습목표

• useState로 상태를 관리할 수 있다.
• 이벤트 핸들링, 조건부 렌더링, 리스트 렌더링을 할 수 있다.

시간 배분

시간 내용

0:00~0:30	useState 기본 문법, 상태 변경 시 리렌더링 원리
0:30~0:50	이벤트 핸들링(onClick, onChange)
0:50~1:10	조건부 렌더링(&&, 삼항연산자)
1:10~1:30	리스트 렌더링(map)과 key의 역할
1:30~2:00	실습: Todo 앱 만들기 (추가/삭제/완료 토글)

예제 코드

import { useState } from 'react';

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((todo) =>
        todo.id === id ? { ...todo, done: !todo.done } : todo
      )
    );
  };

  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>
  );
}

export default TodoApp;

과제

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

---

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

학습목표

• useEffect로 데이터 fetch와 생명주기를 다룰 수 있다.
• 폼(controlled input)을 다룰 수 있다.
• 라우팅의 기본 개념을 이해한다.

시간 배분

시간 내용

0:00~0:30	useEffect 기본 문법, 의존성 배열(dependency array)
0:30~1:00	useEffect로 API 데이터 fetch (컴포넌트 마운트 시 실행)
1:00~1:20	폼 다루기(controlled input), 여러 input 상태 관리
1:20~1:40	props drilling 문제, react-router 간단 소개
1:40~2:00	실습: API 데이터를 받아와서 리스트로 렌더링하는 화면

예제 코드

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();
  }, []); // 빈 배열 = 최초 1회만 실행

  if (loading) return

로딩 중...

;

  return (

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

  );
}

export default PostList;

과제

• 검색 input을 만들어 입력값에 따라 리스트를 필터링하는 기능 구현
• (선택) react-router로 페이지 2개 만들어서 이동해보기

---

3주차 마무리 체크리스트

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

3주차_React.md.pdf

0.28MB