첫 컴포넌트를 화면에 띄운다

자바스크립트는 브라우저 콘솔만 있으면 시작할 수 있었다. React는 그렇지 않다. 준비물이 조금 필요하다.

왜 빌드 도구가 필요한가

React 코드는 이렇게 생겼다.

return <h1>안녕</h1>;

브라우저는 이 코드를 이해하지 못한다. 자바스크립트에 <h1>이라는 문법은 없다. 누군가 이걸 브라우저가 아는 자바스크립트로 바꿔줘야 한다.

코드가 브라우저에 닿기까지

우리가 쓴 JSX<h1>안녕</h1>
빌드 도구변환한다
순수 자바스크립트브라우저가 실행

그 일을 하는 게 빌드 도구다. 요즘은 Vite를 쓴다. 빠르고 설정이 거의 없다.

프로젝트를 만든다

Node.js가 설치돼 있어야 한다. 터미널에 이렇게 친다.

세 줄이면 끝난다

01
프로젝트 생성
이름을 묻고, 프레임워크를 고르라고 한다. React → JavaScript 를 고른다.
```
npm create vite@latest my-app
```
02
폴더로 이동해 설치
React 를 비롯한 필요한 것들을 내려받는다.
```
cd my-app
npm install
```
03
개발 서버 실행
주소가 뜨면 브라우저로 연다. 보통 http://localhost:5173 이다.
```
npm run dev
```

파일 구조를 훑는다

만들어진 폴더 중 지금 볼 것은 셋뿐이다.

당장 중요한 파일

my-app
- index.html브라우저가 처음 읽는 파일. div#root 하나뿐이다
- src
  - main.jsxReact 를 시작하는 진입점
  - App.jsx우리가 고칠 첫 컴포넌트
- package.json설치된 것들의 목록

index.html을 열어보면 놀랄 만큼 비어 있다.

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

HTML이 텅 비어 있다. <h1>도 <button>도 없다. 화면에 보이는 모든 것은 자바스크립트가 div#root 안에 채워 넣는다.

main.jsx가 그 일을 시작한다.

import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(<App />);

root를 찾아서, 거기에 App을 그린다. 딱 그것뿐이다.

컴포넌트는 그냥 함수다

App.jsx를 통째로 지우고 이렇게 쓴다.

function App() {
  return <h1>안녕, React</h1>;
}

export default App;

화면에 "안녕, React"가 뜬다.

여기서 멈추고 이 코드를 뜯어본다. 자바스크립트 편에서 배운 것 말고는 아무것도 없다.

한 줄씩 읽는다

01
그냥 함수 선언문이다
자바스크립트 편 10강에서 배운 그대로다. 특별한 문법이 아니다.
```
function App() { ... }
```
02
화면을 반환한다
return 으로 돌려주는 값이 화면이 된다. console.log 도, DOM 조작도 없다.
```
return <h1>안녕, React</h1>;
```
03
내보낸다
다른 파일에서 import App from "./App.jsx" 로 가져다 쓴다.
```
export default App;
```

컴포넌트가 되기 위한 조건은 딱 두 개다.

컴포넌트의 두 가지 규칙

이름이 대문자로 시작

필수

App, ProductCard — 컴포넌트
app, productCard — 그냥 함수
React 가 이걸로 구분한다
소문자면 HTML 태그로 본다

화면을 반환

필수

JSX 를 return 한다
아무것도 안 그리려면 null
undefined 를 반환하면 에러
숫자나 문자열도 가능

컴포넌트를 나눠본다

파일을 하나 더 만든다. src/Greeting.jsx다.

function Greeting() {
  return <p>오늘도 좋은 하루</p>;
}

export default Greeting;

App.jsx에서 가져다 쓴다.

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <div>
      <h1>안녕, React</h1>
      <Greeting />
      <Greeting />
    </div>
  );
}

export default App;

<Greeting />을 두 번 썼더니 문장이 두 번 나온다. 1강에서 말한 재사용이 이것이다.

지금 만든 구조

AppApp.jsx
- h1안녕, React
- Greeting오늘도 좋은 하루
- Greeting같은 컴포넌트, 또 한 번

반드시 하나로 감싼다

div로 감싼 이유가 있다. 이렇게 쓰면 에러다.

function App() {
  return (
    <h1>안녕</h1>
    <p>반가워</p>
  );
}

콘솔

SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag

함수는 값을 하나만 반환할 수 있다. 자바스크립트 편 10강에서 본 그 규칙이다. 그래서 여러 요소를 하나로 묶어야 한다.

div를 쓰기 싫다면 빈 태그를 쓴다. 프래그먼트라 부른다.

function App() {
  return (
    <>
      <h1>안녕</h1>
      <p>반가워</p>
    </>
  );
}

실제 HTML에는 아무 태그도 추가되지 않는다. 의미 없는 div가 쌓이는 걸 막아준다.

정리하면

React는 브라우저가 모르는 문법을 쓰므로 빌드 도구가 필요하다. Vite를 쓴다.
index.html은 비어 있다. 화면은 전부 자바스크립트가 div#root에 채운다.
컴포넌트는 그냥 함수다. 대문자로 시작하고, 화면을 반환한다.
소문자로 시작하면 React가 HTML 태그로 본다. 에러 없이 빈 화면이 나온다.
반환값은 하나여야 한다. 여러 요소는 <div>나 **프래그먼트 <>**로 감싼다.

다음 강의에서는 지금 대충 넘어간 <h1>안녕</h1>의 정체를 밝힌다. JSX는 HTML이 아니다.

디코드랩

첫 컴포넌트를 화면에 띄운다

Article

왜 빌드 도구가 필요한가

프로젝트를 만든다

프로젝트 생성

폴더로 이동해 설치

개발 서버 실행