[2# Create React App _ CRA] 쉽게 React App 만들기

목차 :

1. Create React App ?

2. CRA 파일 분석

---

 

1. Create React App ?

React는 Component 기반의 UI 라이브러리이다.

React로 Web을 만든 것을 React App이라 한다.

React App을 만들 때 같이 사용하는 중요 라이브러리가 존재한다.

*Webpack (Component Module/ Css 등의 다수 파일을 하나의 파일로 관리할 수 있게 해주는 모듈 번들 라이브러리)

*babel (JSX를 JS 문법으로 사용하게 해주는 라이브러리) 

위 두개 라이브러리이다.

React App을 직접 구현할 때는 개발자가 직접 두 라이브러리를 포함한 여러 설정들을 해줘야한다.

여기서 Create React App을 사용하면 손쉽게 두 라이브러리를 포함한 React App을 만들어준다. 

 

Create React App 이하 CRA는 일명 Boiler Plate라고 부른다. 틀을 만들어 찍어내는 것을 뜻한다.

//cra를 하기 위한 명령어
npx create-react-app __appname__


//여기서 npx는 npm을 보다 쉽게 이용
npm install -g npx

 

 

 

2. CRA 파일 분석

ReactProject
	|-- /node_modules
	|-- /public
	|-- /src
	|-- package_lock.json
	|-- package.json

 

위 구조는 CRA 명령어로 생성한 React App이다.

구조를 보면 App 실행을 위해 필요한 모듈(package, library)들을 저장하고있는 node_modules 폴더

App에서 실행할 때 접근하는 index.html이 위치한 public 폴더

App을 구성하는 js, css, scss 등 소스코드들이 위치한 src 폴더

필요한 package의 특정 버전을 명시하고있는 package_lock.json

필요한 package 및 실행과 관련된 scripts 등 여러 정보가 명시되어있는 package.json이 있다.

 

여기서 package_lock.json 과 package.json을 보면 node.js 의 패키지 구조와 동일하단 것을 알 수 있다.

동일한 이유는 바로 CRA가 node.js 기반이기 때문이다.

 

*/node_modules :

 필요한 module(package, library)들을 저장하는 저장소로

 CRA로 만든 App의 node_modules 폴더에는 많은 모듈을 포함하고있으므로 CRA의 단점 중 하나이다.

 

*package.json :

 App 실행에 필요한 설치된 package, App을 실행하는 명령어 정보(scripts) 등이 명시되어있다.

.

*/public :

 React는 SPA(Single Page Application)를 만들 때 주로 사용되며, SPA의 기본 HTML은 /public/index.html이다.

즉, React의 App Entry Point(진입점)이 /public/index.html이다. 그래서 React를 실행할 경우 /public/index.html이 호출된다.

참고로 index.html을 열어서 확인해보면 id가 root인 div를 호출해온다. 

 

*/src:

index.js와 App.js가 중요한 파일이다

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; // 애플리케이션의 주요 컴포넌트

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root') // index.html 파일의 root 요소에 컴포넌트를 렌더링
);

index.js를 확인해보면 App.js를 import해와서 ReactDom에 render해준다.

그리고 App을 감싸는 div의 id를 "root"로 주었다. /public에서 index.html에 보면 id가 "root"인 div가 있는데

바로 /src/index.js에서 정의한 root div를 말하는 것이다.

 

App.js를 확인해보면 App.js 부터 본격적으로  Web을 구성하는 Component들이 연결되어있음을 확인할 수 있다.

즉, React App은 아래와 같이 호출해온다.

index.html
	|
	<div id="root">
	|
index.js
	|
	import App from './App';
	|
App.js
	|
	import .. from ..

 

/src에 포함된 Component js파일들을 확인해보면

JavaScript와 HTML이 섞인 코드를 확인할 수 있는데

이걸 바로 JSX라고 부른다. JSX는 JavaScript eXtenstion으로 JS의 확장을 의미한다.

 

Component 파일은 보통 아래와 같은 구조이다.

import React from 'react';

// 함수 컴포넌트 정의
function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is a React component.</p>
    </div>
  );
}

export default MyComponent;

참고로 위 코드에선 React를 import 해올 필요는 없다.

 

return이 꼭 존재해야하며 return 안에 JSX 문법이 들어간다.
Component는 props라는 매개변수를 인자로 받는데. 이는 부모로 부터 특정 변수를 전달 받을 수 있다.

export default 는 다른 외부 파일에서 해당 파일을 import 할 수 있게 export 해주는 기능이며

우리가 common js에서 배운 module.export는 Common Module System을 사용하기 때문이고

React에서는 React ES Module System을 사용하므로 export default를 사용한다.

나중에 CRA가 아닌 직접 React를 구축할 때에는 Common Module System을 사용하게 될 수 도있으니 알고있자.