create-react-app 사용해서 만들어보기

출처: 노마드코더 - React JS로 영화 웹 서비스 만들기

 

※ create-react-app을 사용하는 이유

1. 작업하기 훨씬 좋은 환경을 제공해줍니다.

2. 작업할 때 분할과 정복이 쉽기 때문입니다. (ex : css 파일의 모듈화)

 

 

1. src 폴더에 button.js 생성하기

- prop를 받는 컴포넌트를 생성합니다.

- export default 컴포넌트이름 : App.js에서 해당 컴포넌트를 가져올 수 있도록 만들어줍니다.

 

2. App.js에 Button 컴포넌트 import 하기

- TERMIMAL에 npm run start를 입력하면 경고가 발생합니다.

- 'Button' is defined but never used no-unused-vars

- 위 경고는 Button을 import 했지만, 사용하지않았기 때문에 발생한 것입니다.

 

3. 실행하기

- VSC TERMINAL에 npm run start를 입력하고 실행하면 해당 화면이 출력됩니다.

4. propTypes 만들기

- TERMINAL에 npm i prop-types 입력하기

 

5. propTypes 사용하기

- 사용할 파일에 import 해줍니다.

 

6-1. css 파일 만들고 import 하기

- css 파일을 만든 후 사용하고 싶다면, index.js에서 import를 해야만 합니다.

css를 import 한 코드

 

6-2. css module 만들기

- 하지만 create-react-app을 사용하면서 작업을 한다면 css modules를 사용하는 것이 효율적입니다.

- css 파일 이름은 '파일이름.module.css' 로 작성합니다.

- 이 파일은 사용되는 파일에 import 합니다. (index.js 아님)

- 개발자 도구에서 element로 html을 보면 create-react-app은 랜덤 class를 가지는 것을 알 수 있습니다.

  (매번 클래스 이름을 기억하고 있지 않아도 되는 장점을 가졌습니다.)

랜덤 class 이름