[React 시작하기] 개발 환경 설정

Node.js 설치

리액트 프로젝트를 생성하기 위해서는 Node.js가 먼저 설치되어 있어야 한다.

 

https://nodejs.org/ko/download/

다운로드 | Node.js

설치 이후에 터미널에서 node -v 명령어로 버전을 확인할 수 있다.

 

yarn 설치

다음으로는 npm말고 yarn이라는 패키지 관리자 도구를 설치하도록 하겠다. npm에 익숙해져 있으나 더 빠르고 효율적인 캐시 시스템과 기타 부가 기능을 제공한다고 하니 써보는 것도 좋을 것 같았다.

https://classic.yarnpkg.com/en/docs/install#debian-stable

Yarn

 

마찬가지로 설치 이후에 터미널에서 yarn --version 명령어로 버전을 확인할 수 있다.

 

create-react-app으로 프로젝트 생성

리액트 프로젝트를 생성할 때 필요한 설정 과정을 생략하고 바로 프로젝트 작업 환경을 구축해 주는 도구다. 물론 나중에 설정을 변경할 수 있다.

 

yarn create react-app [프로젝트 이름]

프로젝트를 생성하고 싶은 디렉터리에서 해당 명령어를 입력하면 된다.

 

yarn start

해당 프로젝트 디렉터리로 이동한 후 리액트 개발 서버를 구동시키면 된다.

이후 자동으로 리액트 페이지가 띄워진다!

 

 

참고 문서

https://reactjs-kr.firebaseapp.com/docs/installation.html

Getting Started – React

 

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;

위의 코드로 App이라는 컴포넌트를 만들어준다는 걸 알 수 있다. function 키워드를 이용해서 컴포넌트를 만들었으니 함수형 컴포넌트라고 부른다. 

 

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

 

ReactDom.render는 컴포넌트를 페이지에 렌더링 하는 역할 을 한다. 첫번째 파라미터에는 페이지에 렌더링할 내용, 두번째 파라미터에는 렌더링할 document 내부 요소를 설정한다. 여기에서는 id가 root인 요소에 렌더링을 한다. (public/index.html)

 

React.StrictMode는 리액트의 레거시 기능을 사용하지 못하게 한다. 문자열 ref, componentWillMount 등 사라지게 될 옛날 기능을 사용할 때 경고를 출력하게 된다.

 

위의 코드를 보면 자유롭게 HTML 태그 처럼 사용하는 것처럼 보이나 JSX라는 문법을 사용한다. 이는 다음 글에서 다루겠다.