React 컴포넌트와 JSX 기본 문법 이해하기

React에서는 HTML과 비슷한 문법을 사용하여 화면을 구성할 수 있다.

하지만 React에서는 화면을 컴포넌트(Component) 단위로 나누어 관리한다.

이번에는 React의 기본 코드를 살펴보고, 컴포넌트와 JSX의 기본적인 사용 방법을 정리해 보았다.

1. React 기본 코드

React를 사용하면 다음과 같은 형태로 화면을 구성할 수 있다.

console.clear();

import React from "https://esm.sh/react@rc?dev";
import ReactDOMClient from "https://esm.sh/react-dom@rc/client/?dev";

const rootElement = ReactDOMClient.createRoot(
    document.getElementById("root")
);

function App() { 
    return <div>hello</div>; 
} 

rootElement.render(<App />);

먼저 createRoot()를 사용하여 React가 화면을 렌더링할 영역을 지정한다.

const rootElement = ReactDOMClient.createRoot(
    document.getElementById("root")
);

document.getElementById("root")는 HTML에서 id가 root인 Element를 찾는다.

예를 들어 HTML에 다음과 같은 Element가 있다면,

<div id="root"></div>

React는 이 root Element를 기준으로 화면을 렌더링한다.

그리고 다음 코드로 App 컴포넌트를 렌더링한다.

rootElement.render(<App />);

즉, React에서는 App 컴포넌트가 반환하는 내용을 root 영역에 렌더링하게 된다.

2. React 컴포넌트란?

React에서는 화면을 하나의 큰 HTML로 작성하기보다 컴포넌트(Component)라는 단위로 나누어 구성한다.

가장 간단한 컴포넌트는 다음과 같이 만들 수 있다.

function App() {
    return <div>hello</div>;
}

App이라는 함수가 하나의 React 컴포넌트 역할을 한다.

그리고 다음과 같이 사용할 수 있다.

rootElement.render(<App />);

여기서 <App />은 일반적인 HTML Tag가 아니라 React 컴포넌트를 사용하는 JSX 문법이다.

컴포넌트를 사용하면 화면을 여러 개의 작은 단위로 나누어 관리할 수 있기 때문에 코드의 재사용성과 관리가 편해진다.

3. 컴포넌트 이름은 대문자로 시작한다

React 컴포넌트 함수의 이름은 일반적으로 대문자로 시작한다.

function App() {
    return <div>hello</div>;
}

App처럼 대문자로 시작하는 이름은 React에서 컴포넌트로 인식하여 사용할 수 있다.

반대로 일반적인 JavaScript 함수처럼 소문자로 시작하면 HTML Tag와 구분하기 어려워진다.

4. JSX란?

React에서는 다음과 같이 JavaScript 코드 안에서 HTML과 비슷한 문법을 사용할 수 있다.

function App() {
    return <div>hello</div>;
}

이러한 문법을 JSX라고 한다.

JSX는 JavaScript 안에서 UI의 구조를 작성하기 위한 문법이다.

HTML과 비슷하게 생겼지만 완전히 동일한 것은 아니다.

예를 들어 React에서는 JavaScript 표현식을 JSX 안에 넣을 수도 있다.

function App() {
    const name = "React";

    return <div>Hello, {name}</div>;
}

{} 안에는 JavaScript 표현식을 작성할 수 있다.

따라서 JSX를 이용하면 JavaScript의 데이터와 화면을 자연스럽게 연결할 수 있다.

5. 컴포넌트는 하나의 루트 JSX 요소를 반환해야 한다

React 컴포넌트에서 여러 개의 JSX 요소를 반환할 때는 하나의 루트 요소로 묶어야 한다.

다음 코드는 오류가 발생한다.

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

<h1>과 <h2>가 같은 위치에 있기 때문에 하나의 루트 요소로 묶여 있지 않다.

따라서 다음과 같이 하나의 Element로 감싸야 한다.

function App() {
    return (
        <div>
            <h1>App</h1>
            <h2>App</h2>
        </div>
    );
}

이제 <div>가 하나의 루트 요소가 되고, 그 안에 <h1>과 <h2>가 들어가게 된다.

div
├── h1
└── h2

이렇게 하나의 루트 요소 아래에 여러 JSX 요소를 배치할 수 있다.

6. Fragment 사용하기

항상 <div>로 감싸야 하는 것은 아니다.

단순히 여러 요소를 하나의 루트로 묶기 위해 <div>를 추가하면 실제 HTML 구조에 불필요한 Element가 생길 수 있다.

이때 Fragment를 사용할 수 있다.

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

여기서

<>
    ...
</>

가 Fragment이다.

Fragment를 사용하면 여러 JSX 요소를 하나의 그룹으로 묶을 수 있다.

중요한 점은 Fragment 자체가 실제 브라우저 DOM에 별도의 Element로 렌더링되지 않는다는 것이다.

예를 들어 다음 JSX가 있다면,

<>
    <h1>App</h1>
    <h2>App</h2>
</>

브라우저 DOM에서는 불필요한 <div>가 추가되지 않고 다음과 같이 구성된다.

h1
h2

따라서 단순히 여러 JSX 요소를 하나의 루트로 묶어야 하지만 추가적인 HTML Element는 필요하지 않을 때 Fragment를 사용할 수 있다.