📝
프론트엔드 스쿨 교안(1기)/
📝
React(Front-end)/
📝
1. React 프로젝트 생성하기
📝

1. React 프로젝트 생성하기

1-1 생성하기1-2. Hello World
💡
아래처럼 복잡하게 하지 않고 기존에 배웠던 것에서 JSX에 익숙해진 다음 여기로 진입하셔도 좋습니다. 복잡도가 한 번에 커지면 절망감이 느껴지고, 극복하긴 쉽지 않습니다. 여러분이 가장 쉽게 test해볼 수 있는 환경으로 먼저 시작하세요.

1-1 생성하기

이전 챕터에서는 웹페이지에 React를 적용시켜 보았습니다. 이번에는 리액트로 이루어진 프로젝트를 생성해 보도록 하겠습니다. 터미널을 실행하고 한 줄이면 프로젝트가 생성됩니다.
npx create-react-app my-app
💡
+ Node 14.0.0 이상 또는 npm 5.6 이상의 버전을 필요로 합니다! npx는 npm의 도구이며, npm의 5.2.0 이상에서 지원합니다. (2개가 다른 것이 아닙니다.)
위 명령어를 실행하면 명령어를 실행한 디렉토리에 my-app이라는 디렉토리가 하나 생깁니다. 해당 디렉토리 폴더를 열어보면 아래와 같은 모양으로 프로젝트가 생성되어 있을 것입니다.
축하드립니다! 리액트 프로젝트를 생성하셨습니다!
생성된 react프로젝트생성된 react프로젝트
생성된 react프로젝트
 
프로젝트를 생성했으니 실행해 봅시다. 최초 프로젝트 생성 명령어를 실행했던 곳에서 아래 명령어를 입력해 보세요.
cd my-app
npm start
 
명령어를 실행하면 웹페이지가 켜지고 아래와 같은 웹페이지가 실행됩니다.
실행된 react 프로젝트실행된 react 프로젝트
실행된 react 프로젝트
 
※ 자동 생성된 파일들 중에서 아직은 필요하지 않은 파일들은 전부 지워주도록 하겠습니다.
notion imagenotion image

1-2. Hello World

먼저 만들어진 'my-app' 프로젝트를 code editor를 통해 열어주겠습니다. 실행한 후에 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;
기본적으로 작성되어 있는 src/App.js
 
App.js 코드 안에 HTML 태그들이 보이시죠? 네, 맞습니다! HTML 태그에요. 리액트는 우리가 익숙한 HTML과 비슷한 문법을 통해 사용합니다.
return()안에 작성된 내용인데요! 우리가 평소 사용하는 js에서는 똑같은 코드를 실행하면 에러가 발생합니다. 이런 문법은 바로 JSX라고 합니다. JSX에 대한 내용은 다음 챕터에서 자세히 알아보도록 하고 용어만 기억하고 넘어갑시다.
같은 경로인 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')
);

// 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();
기본적으로 작성되어있는 src/index.js
 
이 부분이 바로 우리가 봤던 App.js파일에서 작성된 부분이 보여지게 되는 부분이에요! public 폴더의 index.html 파일을 열어보면 <div id='root'></div> 가 있는데 바로 이 부분에 랜더링됩니다.
즉, App.js가 메인페이지이고, index.js가 메인페이지를 보여지게 합니다. 바로 index.html에요!
 
 
파일을 변경하고 반영되는 화면을 관찰해봅시다.
  • index.html
      • <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <p>index.html test1</p>
  <div id="root"></div>
</body>
</html>
 
  • App.js
      • function App() {
  return (
    <div>
      <h1>App.js test1</h1>
      <p>App.js test2</p>
    </div>
  );
}

export default App;
 
  • index.js
      • import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
 
이번 챕터에서는 대략적인 구조를 살펴보았습니다. 뒤에서 더 자세히 공부해보도록 하겠습니다.
 
 
  • document는 어떻게 index.html과 연결되나요?
    • 웹팩이 해줍니다. 기본적으로 설치가 되어 있고, 여러분 브라우저에서 소스코드를 보면 추가하지 않았던 js파일이 하나 있을거에요. 이렇게 여러분이 작성한 코드를 하나로 묶어줍니다.
    • 혹시라도 웹팩이 어떻게 추가되는지 알고 싶은 분을 위해 글 하나를 올려드립니다. https://maxkim-j.github.io/posts/cra-webpack-config
    • 위 블로그를 보고 실습을 하실 때 유념하셔야 할 부분은 npm run eject 하면 되돌리기 안됩니다.