Skip to content

exercises

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

exercises

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
01-react-basics-practice
01-react-basics-practice
 
 
02-hooks-practice
02-hooks-practice
 
 
03-api-practice
03-api-practice
 
 
README.md
README.md
 
 

README.md

Session 2 - React 실습 문제

Session 2 (React)의 실습 문제들입니다. 각 폴더에는 학습 주제에 맞는 실습 문제와 솔루션이 포함되어 있습니다.

📁 실습 구조

exercises/
├── 01-react-basics-practice/      # React 기초 실습
├── 02-hooks-practice/              # Hooks와 State 실습
└── 03-api-practice/                # API 통신 실습

🎯 실습 방법

1단계: 프로젝트 생성

각 실습 폴더의 README.md에 있는 명령어로 Vite 프로젝트를 생성합니다.

npm create vite@latest [project-name] -- --template react-ts
cd [project-name]
npm install
npm run dev

2단계: 컴포넌트 복사

실습 폴더의 .tsx와 .css 파일을 프로젝트의 src/components/ 디렉토리에 복사합니다.

# 예시: 01-react-basics-practice의 파일들 복사
cp 01-react-basics-practice/*.tsx [project-name]/src/components/
cp 01-react-basics-practice/*.css [project-name]/src/components/

3단계: App.tsx에서 테스트

각 컴포넌트 파일의 주석에 있는 테스트 코드를 App.tsx에 추가하여 테스트합니다.

4단계: TODO 구현

각 파일의 TODO 주석을 참고하여 코드를 작성합니다.

5단계: 정답 확인

파일 하단에 있는 솔루션과 비교하며 학습합니다.

📚 실습 문제 목록

01. React 기초 실습

디렉토리: 01-react-basics-practice/

  1. ProfileCard - 사용자 프로필 카드

    • Props 사용
    • 선택적 Props
    • 조건부 렌더링
    • 기본값 처리

  2. ProductList - 상품 목록

    • 배열 Props
    • 리스트 렌더링 (map)
    • 조건부 스타일링
    • 카테고리별 색상 배지

02. Hooks와 State 실습

디렉토리: 02-hooks-practice/

  1. CounterWithHistory - 히스토리가 있는 카운터

    • useState 사용
    • 배열 State 조작
    • 이벤트 핸들링

  2. TodoListWithFilter - 필터링 Todo 목록

    • 여러 State 관리
    • 배열 CRUD
    • 필터링 로직
    • 통계 계산

03. API 통신 실습

디렉토리: 03-api-practice/

  1. UserList - 사용자 목록

    • fetch API 사용
    • useEffect Hook
    • 로딩/에러/데이터 상태
    • 조건부 렌더링

  2. PostManager - 게시글 관리

    • CRUD 구현
    • POST 요청
    • DELETE 요청
    • 폼 처리

🔧 사용 기술

  • React 18
  • TypeScript
  • Vite
  • CSS3

📖 학습 순서 (권장)

  1. 01-react-basics-practice

    • React 기본 개념 익히기
    • 컴포넌트, Props, 렌더링

  2. 02-hooks-practice

    • State 관리 익히기
    • useState, useEffect
    • 배열/객체 State 조작

  3. 03-api-practice

    • 실전 API 통신
    • 로딩/에러 처리
    • CRUD 구현

  4. todo-app (종합 프로젝트)

    • 모든 개념 통합
    • 완전한 애플리케이션 구현

💡 학습 팁

  1. 먼저 직접 구현해보기

    • TODO 주석을 보고 스스로 구현
    • 막히면 힌트 확인
    • 최대한 스스로 해결 시도

  2. 솔루션과 비교하기

    • 자신의 코드와 솔루션 비교
    • 더 나은 방법이 있는지 확인
    • 다른 접근 방식 학습

  3. 커스터마이징하기

    • 기본 기능에 추가 기능 구현
    • 스타일 개선
    • 에러 처리 강화

  4. 디버깅 연습

    • 브라우저 개발자 도구 활용
    • console.log로 데이터 확인
    • React DevTools 사용

🎓 다음 단계

실습을 모두 완료했다면:

  1. 종합 프로젝트: ../todo-app/ 디렉토리의 완전한 Todo 앱 구현
  2. 추가 기능: 각 실습에 자신만의 기능 추가
  3. 포트폴리오: 완성된 프로젝트를 GitHub에 업로드
  4. 심화 학습: React Router, Context API, 상태 관리 라이브러리

❓ 문제 해결

자주 발생하는 오류

1. CORS 에러

  • JSONPlaceholder API는 CORS를 허용하므로 문제 없음
  • 다른 API 사용 시 프록시 설정 필요

2. TypeScript 에러

  • 타입을 정확히 정의했는지 확인
  • any 타입 사용은 지양

3. 무한 렌더링

  • useEffect의 의존성 배열 확인
  • State 업데이트 무한 루프 주의

🔗 참고 자료

Happy Coding! 🚀