Day 37 (12/9) – React 핵심 기초 문법

⚛️ React 핵심 기초 문법

리액트 개발의 근간이 되는 현대 자바스크립트 문법 요약

• 변수와 상수:
  • const: 재할당이 불가능한 상수. 컴포넌트나 함수 정의 시 주로 사용
  • let: 재할당이 가능한 변수. 값이 변해야 하는 로직에 사용
• 화살표 함수 (=>): 익명 함수를 간결하게 표현하는 ES6 문법. 리액트 컴포넌트 선언 시 표준으로 사용
• 스프레드 연산자 (...): 배열이나 객체의 요소를 개별적으로 펼치는 기법. 불변성을 유지하며 상태(State)를 업데이트할 때 필수적임

---

🧱 React 3대 핵심 개념

리액트를 지탱하는 가장 중요한 구조적 개념

1. 컴포넌트(Component): UI를 구성하는 독립적이고 재사용 가능한 최소 단위. '레고 블록'에 비유됨
2. State(상태): 컴포넌트 내부에서 관리되는 '기억'. 값이 변하면 리액트가 이를 감지하여 UI를 자동으로 재렌더링함
3. Props(속성): 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터. 자식 입장에서는 '읽기 전용'임

---

符号(Sign) 가이드: 리액트 속 기호의 의미

코드를 작성할 때 혼동하기 쉬운 괄호와 기호의 용도 정리

기호	용도	설명
( ) 소괄호	함수 호출 / 우선순위	JSX를 여러 줄로 반환(return)할 때 묶어주는 역할
[ ] 대괄호	배열 (Array)	useState 등에서 여러 값을 한 번에 구조 분해 할당할 때 사용
{ } 중괄호	객체 / JS 표현식	JSX 내부에서 자바스크립트 변수나 로직을 삽입할 때 사용
< > 꺽쇠	JSX (JavaScript XML)	HTML과 유사한 마크업을 작성할 때 사용 (Fragment 포함)

---

💻 실습 현황 및 메모

• 진행 범위:
  • 교재: 《한입 크기로 잘라 먹는 리액트》 p.543 완료
  • 프로젝트: React 과일농장 페이지 구현 완료 (컴포넌트 구조화 실습)
• 향후 일정:
  • 내일(12/10): sp1 프로젝트 페이징(Paging) 구현 수업 예정
  • 백엔드(Spring)와 프론트엔드(React)의 데이터 연동 및 대량 데이터 처리 학습 단계 진입