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

이미지 보기

ReactJS CloneCoding SPA ReactJS ReactJSCloneCoding

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

22.03.27 작성

읽는 데 7분

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가지 방법

index.js에 css파일을 import해서 일괄 적용
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은 랜덤으로 다르기 때문에 편리

FE Developer 박승훈

노력하는 자는 즐기는 자를 이길 수 없다

Github