[React] 첫 React 코드를 이해하기

코병아리·2022년 2월 20일

목록 보기

2/5

src/App.js

import logo from './logo.svg';
import './App.css';

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 React
        </a>
      </header>
    </div>
  );
}
export default App;

이 파일의 코드는 크게 3가지 부분으로 나눌 수 있습니다.

상단의 import 문
중앙의 App 컴포넌트
하단의 export 문

import 구문

import 구문은 특정 파일을 불러오는 것을 의미합니다.

import logo from './logo.svg'; // 로고를 불러옵니다.
import './App.css'; // App 컴포넌트에 관련된 CSS를 불러옵니다.

여기서 모듈을 불러와서 사용하는 것은 javascript 모듈 구문이 아닌 웹팩(Webpack)으로부터 온 것입니다. (javascirpt의 import 구문은 경로의 자바스크립트만 불러오는 용도로 사용되기 때문에 프로젝트 번들링과는 다릅니다)

웹팩은 오픈 소스 javascript 번들러(bundler) 로써, 번들(bundle)은 묶는다는 의미를 가지고 있습니다. 다양한 번들러 (Parcel, browesify) 들이 있으며 도구마다 특성이 다르지만 리액트 프로젝트에서는 주로 웹팩을 사용하는 추세입니다. 원래는 직접 웹팩을 설치하고 세팅을 해줘야 하지만 맨 처음 리액트 프로젝트를 만들 때 사용했던 create-react-app이 이 작업을 대신해줬기 때문에 별도의 설정을 할 필요가 없습니다. 번들러 도구를 사용하면 import로 모듈을 불러왔을 때 불러운 모듈을 모두 합쳐서 하나의 파일을 생성해 줍니다.

App 컴포넌트

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 React
        </a>
      </header>
    </div>
  );
}

위 코드는 App 컴포넌트를 만들어 주는 코드입니다. funtion 키워드를 사용하여 컴포넌트를 만들었기 때문에 위와 같은 컴포넌트를 함수 컨포넌트라고 지칭합니다. 프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하고 있는 내용을 나타내 주게 됩니다. 언뜻 보면 HTML과 유사해 보이지만 JSX로 작성된 파일입니다.