[React.js] React 시작하기

Create React App

: React는 Node.js 기반의 JavaScript 라이브러리로  React를 다방면에서 도와줄 추가적인 라이브러리가 필요한데 대표적으로 Webpack과 Babel이 있다.

*Webpack : 모듈 번들 라이브러리로 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 패키지
*Babel : 자바스크립트의 컴파일러로 JSX라는 자바스크립트와 html을 혼용하여 사용하는 문법등의 여러 가지 쉽고 간단한 자바스크립트 코드를 작성할 수 있게 도와주는 패키지

 

: 이런 부수적인 패키지를 직접 설치하지않아도 create-react-app 명령어를 통해 react app을 set up 할 수 있다.

: React App을 생성할 폴더를 오픈 후 터미널에서 아래 명령어를 통해 생성해 준다.

npx create-react-app 앱이름

*npx : npm을 편리하게 이용하기 위한 도구로 설치되어있지 않은 패키지를 한 번만 사용하고 싶을 때 사용

 

 

React App Start

: 프로젝트를 생성한 디렉토리에서 아래 명령어를 통해 프로젝트를 시작한다.

npm start

 

: "compiled successfully!" 메시지와 함께 나오는 url 주소로 접속하면 프로젝트가 시작되는 것을 확인할 수 있다.

 

React 종료

: ctrl+c > "Y" 입력 후 종료할 수 있다.

 

 

프로젝트 구성

|_ node_modules : node.js 패키지의 구성요소 중 하나로 외부모듈을 저장하고 있는 폴더
|_ public : 정적파일이 포함되는 곳
   |_ favicon.ico : 상단 탭 웹사이트 아이콘 파일
   |_ robots.txt : 경로를 지정해 웹 크롤러 같은 로봇들의 접근을 제어하기 위한 규약
|_ src : js, css 파일들로 구성
|_ .gitignore : git에 포함하고 싶지 않은 파일의 이름 혹은 폴더 등을 입력하는 파일
|_ package.json : 프로젝트 관련 기본적인 내용(프로젝트명, 버전 등)을 기록하는 환경설정 파일
|_ README.md : 프로젝트 설명 작성하는 곳

 

npm start로 실행된 화면이 어떻게 구성되는지 간단히 살펴보겠다.

 

위 초기화면은 App.js를 통해 구성된다.

아래 코드의 header 안의 내용이 위 초기화면의 내용과 같은 부분임을 확인할 수 있다.

//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;

 

하지만 실행 중인 프로젝트를 웹사이트에서 개발자도구로 살펴보면 id가 root인 div아래에 App.js의 내용이 붙는 것을 확인할 수 있다.

 

App.js에서 JSX문법의 html을 리턴하면서 컴포넌트를 생성하고 export default로 내보낸 함수를 다른 파일에서 import 하여 사용이 가능하도록 하였기 때문에

index.js에서 App.js를 import하여 App이라는 함수가 반환하는 값을 id가 root인 div아래로 들어가게 해주는 것이다.

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

이렇듯 React는 컴포넌트를 만들어서 넣어주는 방식으로 동작한다는 것을 확인할 수 있다.

 

 

 

참고

[1] 인프런 한입 크기로 잘라 먹는 리액트(React.js) : Create React App

[2] 리액트의 폴더 구조 : https://velog.io/@sisofiy626/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%9D%98-%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%A1%B0