이전 글에서는 스크립트를 import해서 react를 사용했다.
Create react app은 많은 설정들이 사전에 준비되어 있어 편리하다. 개발서버에 접근한다던가 자동으로 새로고침 시켜준다던가, 즉각적으로 어플리케이션 안에 css를 포함시켜준다던가 하는 기능이 있다.
웹사이트를 publish할 준비가 되면 create react app은 publish 하는 명령어를 가지고 있어서 코드를 압축해주기도 한다.
Create-react-app 사용하기
1. Node.js 설치 > https://nodejs.org/en/
설치 후 cmd같은 터미널을 사용해서 node -v를 입력해서 node.js버전이 나오면 설치 완료.
npx 명령어도 입력해서 작동이 된다면 준비 완료. exit 입력하고 나온다.
나는 cmder을 사용했다.
2. 프로젝트 만들기
터미널에서 프로젝트를 만들 경로로 이동해서 다음 입력
npx create-react-app 프로젝트명
yarn create react-app 프로젝트명프로젝트를 만드는데 에러가 발생했다.
You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1).
- npm uninstall -g create-react-app
- npm add create-react-app
- npx create-react-app 프로젝트
순서대로 명령어를 입력하니 프로젝트 생성이 완료되었다.
프로젝트로 경로를 변경하고 vscode를 실행시킨 후 npm start
code .
npm startProp type 체크
Prop의 type을 체크하기 위해 PropTypes 설치
npm i prop-typesCSS module
Create-react-app으로 작업할 때 포인트는 '분할하고' '정복하는' 것이다.
CSS를 모듈화해서 동일한 클래스명을 다른 파일에서도 사용할 수 있도록 한다.
Create-react-app은 CSS를 Javascript 오브젝트로 변환시켜주고 HTML 상에서 랜덤 클래스명을 가지게 한다.
이전에는 CSS의 클래스를 다르게 하기 위해 사용했던 클래스명을 기억하고 사용할 클래스명을 고민해야했지만 Create-react-app을 사용하면 알아서 랜덤하게 각기 다른 클래스 이름을 지어주니 그럴 필요 없다.
따라서 컴포넌트를 분리해서 만들 수 있고 그 컴포넌트를 위한 CSS를 만들 수 있다.
Button.js
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;
Button.module.css
.btn {
color: white;
background-color: tomato;
}CSS의 파일명을 module을 포함하여 저장하고 기존의 CSS 코드를 입력한다.
js파일에서는 자바스크립트 객체로 변환된 CSS 코드를 import한다.
import styles from "./~";
styles가 CSS 코드를 가지고 있는 객체로 넘어옴
따라서 해당 css코드에 작성된 class name(여기서는 btn)을 프로퍼티 접근 연산자(.)를 사용해서 이용한다.
<button className={styles.btn}></button>
[노마드코더 ReactJS로 영화 웹서비스 만들기]
[목표: 5월 10일까지 끝내기]
#1 [2021 UPDATE] INTRODUCTION 22.05.02
#2 [2021 UPDATE] THE BASICS OF REACT 22.05.03
#3 [2021 UPDATE] STATE 22.05.05
#4 [2021 UPDATE] PROPS 22.05.05
#5 [2021 UPDATE] CREATE REACT APP 22.05.07
#6 [2021 UPDATE] EFFECTS
#7 [2021 UPDATE] PRACTICE MOVIE APP
댓글