[React] React 개요

 

Step 1. 실습 프로젝트 생성

npm create vite@latest

cd react-study
npm install
npm run dev

 

Step 2. React란?

React를 아주 거칠게 표현하면 "데이터를 넣으면 화면을 만들어 주는 JavaScript 코드"라고 할 수 있다. 

즉, 상태(state) → React 컴포넌트 → 화면(UI) 라고 생각할 수 있다.

 

예를 들어, 상태(state)가 

const count = 3;

라고 하면 화면이

현재 숫자: 3

와 같이 되고,

 

state가

const count = 4;

로 바뀌면 React가 화면을 

현재 숫자: 4

와 같이 다시 만들어 준다.

 

이 사고방식이 React의 핵심이다.

 

Step 3. React 핵심 구조

React 입문 단계에서는 다음 네 가지 관계를 이해하는 것이 핵심이다.

Component
    ↓
Props
    ↓
State
    ↓
Event
    └────→ State 변경
              ↓
           다시 렌더링

 

각각을 아주 간단하게 표현하자면

• Component : 화면의 조각
• Props : 컴포넌트가 전달받는 값
• State : 컴포넌트가 기억하는 값
• Event : 사용자의 행동(클릭, 입력 등)

 

그리고 가장 중요한 흐름은 다음과 같다.

사용자가 버튼 클릭
        ↓
event 발생
        ↓
state 변경
        ↓
React가 컴포넌트를 다시 실행
        ↓
새로운 UI 생성

 

 

Step 4. 첫 번째 React 코드

실습 프로젝트에서 src/App.jsx의 코드를 전부 지운 다음 다음과 같이 변경한다.

function App() {
  return <h1>Hello React</h1>;
}

export default App;

 

여기서 App은 그냥 JavaScript 함수이다.

React에서는 이런 함수를 컴포넌트(Component)라고 부른다.

 

그리고

return <h1>Hello React</h1>;

함수가 화면에 보여줄 내용을 반환한다.

 

요약하자면, "JavaScript 함수 → JSX → 화면" 이다.

 

JavaScript 코드를 보면 return 에 HTML이 들어 있는 것을 볼 수 있는데 이 문법을 JSX라고 한다.

JSX는 쉽게 생각해서 JavaScript 안에서 UI를 표현하는 문법으로 HTML과 거의 비슷하다.

 

Step 5. JSX에서 JavaScript 사용하기

React에서 굉장히 중요한 문법이 하나 있다.
바로 {} 이다.

 

function App() {
  const name = "민수";

  return <h1>안녕하세요 {name}</h1>;
}

의 결과는 안녕하세요 민수 로 JSX 에서 {}에 표현식을 넣어 사용할 수 있다.

 

 

핵심 정리

지금 당장은 이 세 줄만 머릿속에 남으면 된다.

• React 앱은 Component로 만든다.
• Component는 JavaScript 함수다.
• Component는 JSX를 반환한다.

따라서

function Greeting() {
  return <h1>Hello</h1>;
}

을 보면 다음과 같이 생각하면 된다.

"Greeting이라는 UI 조각이 있고 그 UI는 h1을 화면에 보여준다."