[React] 번들러 | 리액트 컴포넌트 | JSX

2024.06.12 - [Frontend/React] - [React] 리액트 프로젝트 생성(create-react-app)

[React] 리액트 프로젝트 생성(create-react-app)

 

저번에 생성한 프로젝트에서 App.js 파일을 열어본다.

 

1. 번들러

import logo from './logo.svg';

import './App.css';

상단에 특정 파일들을 불러오고 있다. 번들러 도구를 사용하면 import 또는 requrire로 모듈을 불러와 모두 합칠 수 있다. 번들러 종류로는 웹팩, parcel 등이 있으며 리액트에서는 주고 웹팩을 사용한다.

파일들을 불러오는 것은 웹팩의 로더(loader)가 담당하며 원래 직접 설치하고 설정해야 하지만 프로젝트를 생성할 때 사용했던 create-react-app이 모두 대신해주기 때문에 별로도 설정할 필요가 없다.

 

2. 리액트 컴포넌트

리액트로 만들어진 앱을 이루는 최소 단위이며, 리액트는 여러 컴포넌트를 이용해 웹 앱을 개발한다.

• 클래스형 컴포넌트:

class App extends Component {

 

}

• 함수형 컴포넌트:

function App() {

 

}

 

리액트 Hooks 발표 이후 함수형 컴포넌트를 더 많이 이용한다.

현재 App.js에서도 함수형 컴포넌트를 사용하고 있다.

function App() {

  return (

    <div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>

          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a

          className="App-link"

          href="https://reactjs.org"

          target="_blank"

          rel="noopener noreferrer"

        >

          Learn!

        </a>

      </header>

    </div>

  );

}

 

3. JSX

App() 함수에서 반환하는 내용을 보면 마치 HTML같지만 이는 JSX라고 하는 자바스크립트 확장 문법이다. 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용해 일반 js 형태의 코드로 변환된다. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식 js 문법은 아니다.

 

JSX를 사용하려면 몇 가지 규칙을 알아야 한다.

 

1) 부모 요소

컴포넌트에 여러 요소가 있다면 부모 요소 하나로 반드시 감싸야 한다. App.js를 아래처럼 수정하고 실행하면 오류가 발생한다.

여러 요소가 부모 요소에 감싸져 있지 않기 때문에 오류가 발생한다. Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다. 아래처럼 수정하여 오류를 해결할 수 있다.

function App() {

  return (

    <>

      <h1>hello</h1>

      <h2>react</h2>

    </>

  );

}

이는 <Fragment> 태그의 단축 구문이며 리액트에서 여러 요소를 하나의 부모 요소로 그룹화할 때 추가적인 DOM 노드를 생성하지 않고도 가능하게 해주는 컴포넌트이다. Fragment 기능은 리액트 16 버전이상부터 도입되었다.

물론 div나 다른 html 요소를 사용해 그룹화해도 된다.

function App() {

  return (

    <div>

      <h1>hello</h1>

      <h2>react</h2>

    </div>

  );

}

import { Fragment } from 'react';

function App() {

  return (

    <Fragment>

      <h1>hello</h1>

      <h2>react</h2>

    </Fragment>

  );

}