[React] React 어플리케이션 설치

1. node.js 설치

https://nodejs.org/ko/download

 

2. 터미널에서 node -v 명령어로 node.js 설치 확인

설치가 되었다면 버전이 출력됨!

node -v

 

3. npx를 입력해서 npx 커맨드를 작동시킬 수 있도록 준비

npx

 

4. 리액트 애플리케이션 생성

아래의 my-app은 프로젝트 명으로 사용자가 원하는 대로 명명

npx create-react-app my-app

 

5. my-app 폴더를 찾아서 vs code로 열기

터미널에서 code my-app 입력해서 찾기 또는 직접 폴더를 검색해서 찾기

code 프로젝트 폴더명

 

6. vs code에서 my-app 폴더를 열어서 터미널 창에  npm start 입력을 하면 자동으로 localhost:3000 페이지 로드

개발하는 동안 서버를 실행해야지 개발 중인 애플리케이션을 실시간으로 반영할 수 있다.

// 서버 실행
npm start
// 서버 종료
ctrl + c

 

 

7. src폴더에서 App.js와 index.js를 제외한 모든 파일 삭제

이후 아래의 코드로 작성하면 다음과 같은 화면을 볼 수 있다.

8. prop-types 설치

npm install prop-types

 

 

9. Button.js & Button.module.css 

Button 파일에서 PropTypes import 하고 css파일을 생성해서 import 한다.

이전까지 사용했던 css방식을 적용하면 모든 스타일에 적용되기 때문에 Button파일에서 사용하려면 아래 코드처럼 사용해야 한다.

CSS Modules를 사용하는 것!

 

10. App.js & App.module.css

 

11. 콘솔창 확인 

위의 코드대로 저장 후 콘솔 창을 열어서 확인해 보면 class 이름이 특이한 것을 알 수 있다

이것은 CSS Modules를 사용하여 스타일을 적용할 때, 클래스 이름은 고유한 해시 값이 포함된 형식으로 생성된다.

그렇게 해야 클래스 이름 충돌을 방지하고 스타일을 격리된 방식으로 관리하기 위한 메커니즘이다. 

CSS Modules을 사용하면 개발할 때 클래스 명을 기억할 이유가 없어진다.

같은 클래스명을 사용하더라도 고유한 값이 붙어서 다른 클래스가 되니까!