[React] 리액트 기초 핵심 정리: 컴포넌트, JSX 문법, 그리고 useState

오늘의 목표

• React 프로젝트를 직접 실행해본다.
• 컴포넌트(Component)와 JSX 문법을 이해한다.
• useState를 이용해 상태(State)를 관리하는 방법을 마스터한다.

---

핵심 개념 톺아보기

1. 프론트엔드(Frontend)란?

사용자가 화면에서 직접 보고 상호작용하는 모든 영역을 말합니다.

• 예시: 버튼, 텍스트, 댓글창, 메뉴, 로그인 화면, 좋아요 버튼, 게시글 목록, 프로필 카드 등

2. React란?

예전에는 HTML 파일로 하나하나 화면을 따로 만들었지만, React는 화면을 작은 조각(컴포넌트)으로 쪼개서 조립하듯 만드는 방식입니다.

• ⚡ 최고의 장점: 코드를 수정하고 저장만 해도 화면이 바로바로 바뀌는 새로고침(HMR) 기능을 지원합니다.

주요 파일의 역할

React 프로젝트를 열었을 때 가장 먼저 마주하는 핵심 파일 두 가지입니다.

파일명	역할
main.jsx	React 앱을 시작(진입점)하는 파일
App.jsx	화면에 보이는 대부분의 전체적인 UI를 작성하는 파일

---

컴포넌트(Component)란?

쉽게 말해 "함수 = 컴포넌트"라고 생각하면 됩니다.
함수 내부의 return 안에 화면에 보여줄 UI 내용을 넣는데, 이때 HTML과 비슷하게 생긴 JSX 문법을 사용합니다. 이렇게 만든 컴포넌트는 마치 레고 블록이나 HTML 태그처럼 원하는 곳에 가져다 재사용할 수 있습니다.

---

반드시 지켜야 할 JSX 규칙 3가지

JSX는 HTML처럼 생겼지만 자바스크립트의 확장 문법이기 때문에 엄격한 규칙이 있습니다.

① return 안에는 반드시 하나의 덩어리로 작성하기

두 개 이상의 태그를 나란히 배치할 수 없습니다. 무조건 하나의 부모 태그로 감싸야 합니다. 마땅히 감쌀 태그가 없다면 빈 태그(Fragment)를 사용해도 됩니다.

// ❌  
return (
  <h1>안녕하세요</h1>
  <p>반갑습니다</p>
)

// ⭕ (<> </> 빈 태그로 감싸기)
return (
  <>
    <h1>안녕하세요</h1>
    <p>반갑습니다</p>
  </>
)

오류와 해결

const [count1, count2, count3 setCount1]=useState(0) 처럼 여러개의 변수에 한번에 useState를 사용하려함 그레서 변수 마다 따로 useState를 사용함

---

과제

코두

실행 결과