[React 영화 서비스 만들기] 프로젝트 생성

본격적으로 리액트 프로젝트를 생성해보자

 

⦁ 시작 전 필요한 것

① node가 깔려 있어야 한다.

 node -v

버전이 잘 출력되면 node 준비완료

없다면 설치해야 함

 

② npx 커맨드 작동되는지 확인

npx

 

리액트 설치

npx create-react-app 프로젝트명

리액트 실행

npm start

 

package.json 파일 "scripts" 에서 명령어를 확인할 수 있다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

 

prop-types(프롭타입스)라이브러리 설치

프롭타입을 검사해주는 라이브러리

⦁ 설치

npm i prop-types

 

⦁ 사용

- 임포트

import PropTypes from "prop-types";

- PropTypes 지정

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

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

export default Button;

모듈 CSS 사용해보기

⦁ css-module

- 클래스명이 리액트에서 자동으로 변환되어 클래스명이 충돌할 일이 없다.

- 컴포넌트 단위로 스타일을 적용할 때 사용하기 좋다.

 

⦁ 사용

- 파일 생성

이름.module.css

 

 

css-module에서는 class 밖에 사용 못합니다. (id X)

.title {
	color: red;
}

- 임포트

import styles from './이름.module.css';

 

- jsx에서 사용

<h1 className={styles.title}>제목이용</h1>

 

 

React에서는 CSS를 사용하는 다양한 방법들이 있습니다.

[React] CSS를 작성하는 방법들, css-module, sass, css-in-js