React 프로젝트 시작하기

 React 프로젝트 환경을 구축하기 위해서 node.js의 여러 라이브러리들을 이용하여 사용하겠습니다.

준비사항

 React는 컴포넌트를 여러가지 파일로 분리하여 저장하고 js가 아닌 jsx라는 문법을 사용할 것입니다.

- Webpack : 여러가지 분리된 파일 하나로 합쳐주는 라이브러리

- Babel : jsx를 비롯한 새로운 js 문법을 사용하기 위한 라이브러리

- Node.js : Webpack과 Babel 등 여러 라이브러리를 사용하기 위한 javascript 런타임

- Yarn : 캐싱 시스템 등 조금 더 개선된 npm(node package manager)

- Visual Studio Code : 실제 개발을 위해 필요한 에디터 (공짜)

 다음 준비사항들의 설치 과정은 생략하겠습니다.

CRA(create-react-app)

 초심자가 React를 처음부터 설정하기는 상당히 복잡한 작업이 필요합니다. 페이스북에서 제공하는 CRA를 통해 작업 환경을 구축하도록 하겠습니다. 다음 명령어를 사용하여 CRA를 설치할 수 있습니다.

// npm을 이용한 설치
npm install -g create-react-app
 
// yarn을 이용한 설치
yarn global add create-react-app

CRA 사용법

 터미널에서 작업 영역에서 이동하여 명령어를 통해 한 번에 프로젝트를 설치합니다.

create-react-app cra-install-test

 잠시 기다린 후 다음과 같이 나오면 설치가 완료된 것입니다.

실행

 다음 명령어를 통해 프로젝트를 실행할 수 있습니다.

cd cra-install-test
yarn start

 실행 후 자동으로 해당 페이지가 로드됩니다.

프로젝트 구조

 CRA 프로젝트를 VS Code로 실행해봅시다. 다음과 같은 구성으로 되어있을 것입니다.

 여기서 컴포넌트인 App.js를 열어봅니다.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    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;
 

 크게 세 부분으로 나눠서 보겠습니다.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

 파일에서 jsx 문법을 사용하려면 React를 꼭 import 해주어야 합니다. 또한 Webpack을 사용하고 있기 때문에 logo.svg와 App.css를 다음과 같이 불러올 수 있습니다.

class App extends Component {
  render() {
    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>
    );
  }
}

 컴포넌트를 만드는 방법 중 하나인 클래스를 이용한 방법입니다. 클래스 형태는 꼭 render() 라는 함수가 있어야 하고, 그 내부에서는 jsx를 반환해 주어야합니다. return 뒤의 HTML 같은 코드가 jsx 입니다.

export default App;

 이렇게 작성된 컴포넌트를 다른 곳에서 불러서 사용할 수 있게 하기위해 해당 코드가 필요합니다.

 

 다음은 index.js를 열어봅니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
 
ReactDOM.render(<App />, document.getElementById('root'));
 
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

 우리가 만든 App 컴포넌트를 다음과 같이 사용합니다.

import App from './App';

 브라우저 상에 React 컴포넌트를 보여주기 위해서 ReactDOM.render(렌더링 결과물, 그릴 DOM) 함수를 사용합니다.

ReactDOM.render(<App />, document.getElementById('root'));

 위의 코드는 public/index.html 파일에 있는 id가 'root'인 DOM을 찾아 App 컴포넌트를 렌더링 해줍니다.

References

[Velopert 블로그 리액트 시작하기] https://velopert.com/3621

[Velopert 블로그 JSX-컴포넌트 파일 파헤치기] https://velopert.com/3626