Day 28 (11/26) - React 기초 개념 및 주요 명령어 정리

Day 27 (11/25) 올데이 팀프로젝트

 

⚛️ React State (상태 관리)

• 정의: 컴포넌트의 상태를 관리하는 객체
• 특징: State 값이 변경될 경우 리액트가 이를 감지하여 해당 컴포넌트를 자동으로 리렌더링함
• 용도: 동적인 데이터 처리 및 사용자 인터페이스(UI) 업데이트의 핵심 요소

---

🛠️ 주요 NPM & NPX 명령어

프로젝트 생성부터 배포용 빌드까지 자주 사용하는 핵심 명령어 모음

명령어	설명
npx create-react-app [프로젝트명]	새로운 리액트 프로젝트 생성
npm start (또는 npm run start)	개발 모드로 로컬 서버 실행
npm run build	배포를 위한 프로젝트 빌드(최적화)
npx serve build	빌드된 결과물을 로컬에서 실행 및 확인
Ctrl + C	실행 중인 개발 서버 종료

---

📝 카운터 앱 구현 예시 (JSX 구조)

가장 기초적인 State 활용 예제인 카운터 컴포넌트의 기본 구조

// 기본 레이아웃 구조
<div>
  <div>현재 카운터: </div>
  <h1>0</h1>
</div>

---

📅 향후 학습 및 프로젝트 일정

• 리액트 심화: 이번 주 리액트 집중 학습 및 [카운터] 앱 실습 완료 (p.268~270 참조)
• 스프링부트 전환: 이틀간 기존 내용을 Spring Boot 환경으로 마이그레이션 진행
• 데이터베이스 및 기타: MySQL 연동 학습 및 파이썬/장고(Django) 확장 고려