[ReactJS] Create React App - ReactJS 로 영화 웹 서비스 만들기 (5)

 

본격적인 React 의 시작!!

Create React App

 

 

---

 

 

#5. Create React App

 

Create React App

리액트 어플리케이션을 쉽게 만들 수 있게 해줌

많은 스크립트와 configuration 들이 도와줌

 

자동 새로고침, 즉각적인 CSS 포함 등의 기능 제공

 

 

CRA 실행 방법

1. nodeJS 설치

https://nodejs.org/en/ 에서 버전에 맞는 걸로 설치하기

 

2. nodeJS 설치 확인

cmd 에 node -v 실행

npx 도 확인

 

그럼 CRA 만들 준비 완료!!

 

3. Create-React-App 생성

cd C:\(사용할 폴더 주소) 명령어를 이용해 어플리케이션을 만들 폴더로 이동

 

npx create-react-app (사용할 app 이름)

자동으로 설치가 진행된다.

 

설치 완료 후, code (사용할 app 이름) 을 실행하면 자동으로 vscode 실행

 

4. Create-React-App 실행

(yarn.lock 이 있을 경우, 삭제)

 

package.json 확인

start script 를 실행해보자.

 

터미널에 npm start 를 입력하면

자동으로 development server 를 만들고 페이지 실행

 

 

동작 원리

src = 모든 파일들 저장

index.js 는 App.js 컴포넌트를 렌더링

index.js 에서 렌더링 된 값들을 public > index.html 에 넣어준다

 

이 모든 게 CRA 에서 자동으로 설정되어 있음

 

CRA 초기 설정

1. src 폴더에서 index.js 와 App.js 를 제외한 나머지 파일들 삭제

 

2. index.js, App.js 수정

 

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')
);

 

App.js

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

export default App;

 

3. 결과

 

여기까지 어플리케이션 개발을 위한 초기 설정이 완료되었다.

 

 

---

 

 

버튼 컴포넌트 생성하기

ReactJS 는 한 파일당 한 컴포넌트를 갖는다.

-> 부모 컴포넌트에서 import 해서 사용

 

Button.js 생성

import PropTypes from "prop-types";

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

export default Button;

 

export default Button;

=> App.js 에서 Button 을 import 해서 사용할 수 있게 하기 위함

 

App.js

import Button from "./Button";

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

export default App;

 

참고) import 만 하고 사용하지 않았을 경우 npm start

=> CRA 가 주는 일종의 도움

 

 

PropTypes 적용

npm i prop-types 실행 -> 설치됨

 

import PropTypes from "prop-types"; 해서 사용

 

import PropTypes from "prop-types";

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

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

export default Button;

 

isRequired 로 필수 프로퍼티 지정

 

 

Style 적용

1. 전체 Style

src > styles.css 생성

button {
    color: white;
    background-color: tomato;
}

 

index 에서 import 하면

모든 button 의 css 가 동일하게 적용된다.

 

2. Style Prop 이용

<button style={{
    backgroundColor: "tomato",
    color: "white",
}}></button>

 

버튼마다 style 복사를 해야 함

 

3. CSS Module 이용

(아무 이름).module.css

 

Button.module.css 생성

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

 

Button.js 에서 import

import PropTypes from "prop-types";
import styles from "./Button.module.css";

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

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

export default Button;

 

className = "btn" 으로 쓰지 않고 className = {styles.btn} 로 사용

 

CRA 가 랜덤하게 클래스 이름을 만들어냄

-> 다른 클래스 이름들을 기억해서 하는 것보다 훨씬 좋다.

 

스타일을 모듈러처럼 사용 가능

- 동일한 클래스 이름을 다른 파일 내에서도 사용 가능

- 같은 클래스 이름을 다른 모듈에서 사용해도 문제 X

 

CSS Module 이 가장 좋다.

 

 

결과

 

App.module.css 도 만들어서 title 에 대한 css 를 적용했다.

.title {
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 18px;
}

 

 

CRA 특징

- CRA 는 divide and conquer

 

장점

- Auto-Reload 자동 실행

- Auto-Complete 자동 완성

(with vscode)

 

 

---

 

 

다음은 컴포넌트의 마지막 한 조각인 effect 를 배우는 시간이다.