이 편에서 만드는 파일

bookshelf/
  package.json
  vite.config.js
  index.html
  src/
    main.jsx
    App.jsx
    components/
      BookForm.jsx
      BookList.jsx
      BookCard.jsx
      ThemeToggle.jsx
    context/
      ThemeContext.jsx
    reducers/
      booksReducer.js
    App.css

새 파일은 없습니다. 위 구조가 지금 내 bookshelf 폴더와 같은지 확인만 합니다. 다르다면 파일명·폴더명을 이 구조에 맞춥니다.

개념 정리

지금 bookshelf가 하는 일

react_1을 마친 bookshelf는 페이지 하나에서 책 목록·추가 폼·필터·테마 전환을 모두 처리합니다.

각 책 객체는 id, title, author, status(wish|reading|done), rating, pages, coverColor, startedAt, finishedAt, memo 필드를 가집니다.

중급에서 달라지는 것

기존 문법(컴포넌트, JSX, useState/useEffect/useReducer/useRef, 이벤트·리스트 렌더링, Context)은 이미 다룰 수 있다고 가정하고 반복하지 않습니다.

실습 폴더 규칙

• 편 번호가 바뀔 때마다 실제 코드는 같은 bookshelf/ 폴더 안에서 계속 이어집니다. 편마다 새 폴더를 만들지 않습니다.
• 각 편 상단의 “이 편에서 만드는 파일” 트리에서 +는 새 파일, ~는 수정 파일입니다.
• 한 편을 마칠 때마다 커밋을 하나 남기면 편 사이를 되짚기 쉽습니다. 이 과목 문서 자체는 커밋을 요구하지 않지만 권장합니다.

실습

npm ls react react-dom

node --version

확인

• npm run dev 실행 후 브라우저에서 책 목록·추가 폼·테마 토글 버튼이 한 화면에 보입니다.
• 폴더 구조가 위 트리와 다르면(예: reducers/ 대신 다른 위치에 있음) 02편부터 시작하기 전에 구조를 맞춥니다.

직접 해보기

1. src/App.jsx를 읽고 books state가 어디서 초기화되는지(useReducer의 두 번째·세 번째 인자) 찾아봅니다.
2. localStorage에 저장된 키 이름을 브라우저 개발자 도구의 Application 탭에서 확인해봅니다.

자주 하는 실수

확인 문제

참고 자료

• React 공식 문서 - Quick Start