[ReactJS] React로 영화 서비스 만들기 : 5. Create React App

Create React App?

• 지금까지는 비효율적으로 script 태그에 jsx를 작성하고 있었다.
• create-reate-app(CRA)는 이 비효율을 해결해준다.
• 엄청나게 많은 스크립트들과 많은 사전설정을 도와준다.
  • 개발 서버 접근
  • 자동 새로고침
  • App에 CSS 즉시 포함 기능 등

CRA의 설치

가. nodejs의 설치

• nodeJS 설치 사이트(링크)에서 설치하면 된다.
• console에 $ node -v을 입력했을 때 버전 정보가 나온다면 정상적으로 설치된 것

나. npx 커맨드의 작동

• console에 $ npx를 입력했을 때 작동하는지 확인

Entering npm script environment at location:
C:\Intellij
Type 'exit' or ^D when finished

다. cra 폴더의 생성

cra 폴더를 새로 생성하고자 하고자 하는 경로까지 이동한 후 아래의 명령어를 입력

$ npx create-react-app <app_name>

• 나는 ‘cra-practice’ 라는 이름의 app_name으로 폴더를 저장했다.
• 10,000개 이상의 파일이 생성되기 때문에 git repository의 local folder에 생성하는 경우 주의한다.

CRA의 시작

package.json 파일을 보면 실행할 수 있는 여러 script들이 있다.

npm start

cra 폴더 내에서 다음의 명령어를 입력한다.

$ npm run start

• npm start도 가능
• 개발용 서버를 만드는 코드

src 폴더

src 폴더는 App을 만드는 모든 파일이 들어있어야 하는 공간

기본 코드 제거

index.js

• index.js에는 화면을 구성하는 기본 코드들이 존재
• 불필요한 퍼포먼스 테스팅 코드 및 CSS import 등 존재
• 모두 제거 후 기본부터 시작

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

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

불필요한 코드를 모두 제거한 index.js 파일의 코드 모습

App.js

index.js 와 마찬가지로 불필요한 기본 코드 제거

function App() {
  return (
    <div>
      <h1>Welcome Back!</h1>
    </div>
  );
}

export default App;

불필요 파일 제거

App.test.js
App.css
index.css
logo.svg
ReportWebVitals.js
setupTests.js

• App.js, index.js에 포함되어 있던 기본 코드들의 연동 파일들
• CSS 구성 및 테스팅 파일
• 초기에는 불필요하므로 제거

js 파일의 의의

• 기존에 컴포넌트 단위로 사용된 App들이 각각 App.js 등으로 나뉘었다.
• index.js에서 컴포넌트 폴더를 import해서 종합
• 차후에 버튼 등 다른 컴포넌트도 한 개의 파일로 구성될 것임을 의미

CRA를 활용한 컴포넌트의 생성과 사용

컴포넌트 파일 생성

src 폴더에 ‘Button.js’ 파일 생성

컴포넌트 코드 작성 및 export

function Button({ text }) {
  return <button>{text}</button>;
}
export default Button;

• export default func_name 명령어를 반드시 마지막에 작성
• App.js에서 import해서 render하기 위한 코드

App.js에서 import 및 사용

import Button from "./Button";

function App() {
  return (
    <div>
      <h1>Welcome Back!</h1>
      <Button text={"Continue"} />
    </div>
  );
}

export default App;

• ./Button : 현재 폴더(src 폴더)의 Button.js 파일을 모듈로 함
• import Button : Button.js 내의 Button 함수를 import
• 경로 설정에 주의

Prop Types의 설치와 사용

Prop Types의 설치

console에 다음과 같이 입력

$ npm i prop-types

“npm아, prop-types 설치(i; install)해줘” 라는 의미

Prop Types import 및 사용

import PropTypes from "prop-types";

function Button({ text }) {
  return <button>{text}</button>;
}

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

• Prop Types를 적용할 Component js파일에 import
• PropTypes.aaaa, PropTypes.bbbb 의 두 속성을 모두 사용하고 싶다면 ProTypes.aaaa.bbbb로 함축 가능

특정 컴포넌트용 CSS 파일 : CSS 모듈

CRA에서 CSS를 적용하는 2가지 방법

1. index.js에 css파일을 import해서 일괄 적용
2. component.js에 css모듈파일을 import해서 부분 적용

CSS 모듈 사용법

CSS 모듈 생성

• Component명과 동일한 이름+module.css 방식으로 CSS 생성
• ex) Button.module.css
• 클래스를 이용해 작성

.btn {
  color: white;
  background-color: tomato;
}

CSS 모듈 import

• component에 CSS 모듈 파일을 import
• 아래와 같이 작성

import styles from "./Button.module.css";

function Button({ text }) {
  return <button className={styles.btn}>{text}</button>;
}

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

• 위의 코드를 통해 CSS로 디자인된 클래스를 지정
• 개발자 도구로 element에 대해 살펴보면 다음과 같다.

• create-react-app은 무작위적인 랜덤 class를 가진다는 사실을 알 수 있다.
• className을 기억하고 있어야 하는 불편 제거
• 다른 Component css module에서 같은 class로 디자인을 정의하더라도 render되는 className은 랜덤으로 다르기 때문에 편리