[React] 4. CREATE REACT APP

본 게시글은 노마더코더의 ReactJS로 영화 웹서비스 만들기 코스를 수강하며 정리한 글입니다.

 

creat-react-app 설치

 

Node.js 설치해야한다.

 

node -v

 

npx 실행 확인

 

npx create-react-app [프로젝트 이름]

 

리액트 서버 시작

 

npm start

 

컴포넌트를 모듈화

 

import React from 'react';

const Button = () => {
	return <button>버튼</button>
}

export default Button;

 

import Button from './component/Button.js'

const ButtonContainer = () => {
	return <Button />
}

 

Button.js를 import해 <Button />로 사용할 수 있다. 즉, 모든 컴포넌트들이 js(jsx) 파일로 되어 모듈로 export된다.

React Component로 사용하고자 할 경우 HTML 태그와 혼동을 방지하기 위해 첫 글자를 대문자로 작성해야한다.

 

ClassName

 

creat-react-app에서는 css 역시도 모듈화 할 수 있다.

이 경우 class를 creat-react-app에서 랜덤으로 바꿔주기 때문에 같은 클래스 이름 사용해도 상관이 없다.

-> 다른 모듈 파일이기도 하고 리액트에서 랜덤으로 배정

 

빌드 시 하나의 css 파일로 합쳐지기 때문에 다른 컴포넌트에서 같은 클래스 이름을 사용할 경우

정상적인 값이 나오지 않을 수 있다.