create-react-app

• 리액트 프로젝트 개발환경 구축을 처음부터 설정하는 것은 굉장히 복잡하다. 그러나 create-react-app을 사용하면 쉽게 개발환경을 설정할 수 있다.
• create-react-app은 페이스북에서 만든 공식적인 React 웹 개발용 Boilerplate이다. 직접 모든 개발환경을 설정하지 않아도 되고 페이스북이라는 거대한 기업에서 지속적으로 업데이트를 해주기에 많은 사람들이 사용하고 있다.
• 설치 방법1

  npm install -g create-react-app
  create-react-app [프로젝트 이름]
  cd [디렉토리 이름]
  npm start

• 설치방법 2

  npx create-react-app [프로젝트 이름]
  cd [디렉토리 이름]
  npm start

💡 npx란?

npm의 5.2.0 버전부터 추가된 도구로 npm 레지스트리에 올라가 있는 패키지를 쉽게 설치하고 관리할 수 있도록 도와주는 CLI도구다. npx는 기존 npm 설치 방법과는 다르게 일일이 설치, 실행, 제거를 할 필요 없이 일회성으로 원하는 패키지를 npm 레지스트리에 접근해서 실행&설치라는 실행 도구다. 내개 패키지를 설치하고 업데이트하지 않아도 npm 레지스트리에 올라가 있는 최신 버전을 실행&설치해 준다.

create-react-app 프로젝트 구조

create-react-app
├── README.md
├── node_modules
├── package.json
├── public
│   └── index.html
└── src
		├── App.css
		├── App.js
		├── index.css
		├── index.js
		└── logo.svg

public

• static resource가 위치하는 디렉토리
• index.html : 엔트리 포인트로 이름 변경 시, 애플리케이션이 제대로 작동하지 않는다.
  • id가 root인 div에 내용물 출력

src

• 리액트 코드가 위치하는 디렉토리
• index.js : 엔트리 포인트로 이름 변경 시, 애플리케이션이 제대로 작동하지 않는다.

  // jsx문법을 사용하기 위해 필요한 react모듈. 모든 react 컴포넌트에 필수적인 코드다.
  import React from 'react';
  // react-dom모듈은 react 앱을 최초 렌더링 하기위해 엔트리 포인트에서 쓰인다. 
  // 브라우저 뿐만 아니라 서버사이드용 랜더링 메소드를 지원한다.
  import ReactDOM from 'react-dom';
  // css파일을 import 구문으로 가져오고 있다. 
  // 이는 webpack의 css-loader를 활용한 것인데, 
  // create-react-app에서 기본적으로 세팅이 되어있다.
  import './index.css';
  // App라는 이름의 컴포넌트 가져오기
  import App from './App';
  // React의 성능을 측정하기 위한 reportWebVitals. 삭제해도 무방
  import reportWebVitals from './reportWebVitals';
  
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );
  
  // 애플리케이션의 성능을 측정할 때 사용하는 함수.
  // 원치 않을 경우 삭제 가능 
  reportWebVitals();

💡 <React.StrictMode/> 란?

<React.StrictMode/> 는 리액트 프로젝트에서 리액트 레거시 기능들을 사용하지 못하게하는 기능이다. 이를 사용하면 문자열 ref, componentWillMount 등 deprecated 된 기능을 사용할 때 경고를 출력한다.

• App.js

  // 해당 컴포넌트에서 사용할 svg
  import logo from './logo.svg';
  // 해당 컴포넌트에서 사용할 css
  import './App.css';
  
  function App() {
    return (
      <div className="App">
        // 소스 코드
      </div>
    );
  }
  
  // 해당 컴포넌트 내보내기
  export default App;