React Study

React 공식 학습 예제를 따라 구현하며 컴포넌트 분리, 상태 관리, 이벤트 처리, 조건부 렌더링을 연습하는 저장소입니다.

프로젝트 구성

React_study/
|-- thinking-in-react/
|   |-- public/
|   |-- src/
|   |   |-- App.js
|   |   |-- index.js
|   |   `-- styles.css
|   `-- package.json
`-- tic-tae-toc/
    |-- public/
    |-- src/
    |   |-- App.js
    |   |-- index.js
    |   `-- styles.css
    `-- package.json

학습 예제

thinking-in-react

상품 목록을 검색하고 재고 상품만 필터링할 수 있는 예제입니다.

• 검색어 상태 관리
• 체크박스를 이용한 필터 상태 관리
• ProductTable, SearchBar, ProductRow 등 역할별 컴포넌트 분리
• props를 통한 데이터 전달

tic-tae-toc

React 튜토리얼의 틱택토 게임 예제입니다.

• useState를 이용한 게임판 상태 관리
• 클릭 이벤트 처리
• 승자 계산 로직
• 플레이 히스토리 저장
• 이전 턴으로 이동하는 time travel 기능

기술 스택

• React
• React DOM
• React Scripts
• JavaScript
• CSS

실행 방법

각 예제는 독립적인 React 앱이므로 실행하려는 프로젝트 폴더로 이동한 뒤 명령어를 실행합니다.

thinking-in-react 실행

cd thinking-in-react
npm install
npm start

tic-tae-toc 실행

cd tic-tae-toc
npm install
npm start

개발 서버가 실행되면 브라우저에서 http://localhost:3000으로 접속합니다.

사용 가능한 스크립트

각 프로젝트 폴더에서 다음 스크립트를 사용할 수 있습니다.

npm start

개발 서버를 실행합니다.

npm run build

프로덕션 배포용 파일을 생성합니다.

npm test

테스트 러너를 실행합니다.

npm run eject

Create React App 설정 파일을 프로젝트로 분리합니다. 한 번 실행하면 되돌릴 수 없으므로 신중하게 사용해야 합니다.

설치 요구 사항

• Node.js
• npm

Node.js와 npm이 설치되어 있어야 하며, 각 프로젝트 폴더에서 npm install을 실행해 의존성을 설치합니다.

작성자

• OhSuBin13