React : Create React App

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.

Before Create React App

React를 사용하기 위해서는 Node가 필요하다.
Node가 설치되어있지 않다면 node.js에서 설치하자.
Node의 설치여부를 확인하고 싶다면 터미널이나 CMD에서 아래 코드를 작성하면 된다.

//노드 버전 확인, 노드가 잘설치되었는지 확인
node -v

//정상설치 되었을 경우 버전명이 출력된다. 아니라면 재설치 필요.
npm -v

정상설치가 되었을 때 아래 이미지처럼 출력되는 것을 확인 할 수 있다.

//추가 확인 항목
npx

npx까지 작동이 되어야 react를 사용할 준비가 완료 된 것이다.
만약 npx가 작동되지 않는다면 아래 코드로 설치 할 수 있다.

npm install -g npx

NPM과 NPX
npm(Node Package Manager)은 node.js의 모든 패키지와 모듈을 관리하는 노드 패키지 관리자를 뜻 한다. 하지만 의존성 라이브러리(Dependency) 들이 전역이나 로컬에 설치된 채 관리가 되면 패키지가 업데이트 되었을 때, 전역으로 관리되고 있는 패키지와 로컬로 관리되고 있는 패키지를 각각 업데이트를 해줘야한다는 단점이 있다. 이를 보완해서 나온 것이 npx(Node Package eXecut)이다.

Create React App

아래 코드를 순서대로 작성.
my-app은 원하는 프로젝트의 이름으로 작성하면 된다.
참고로 react, react-dom, react-scripts라는 이름으로는 프로젝트명을 지정할 수 없다.

npx create-react-app my-app
cd my-app
npm start

하지만 슬프게도 최신릴리즈에서 더이상 Create React App의 전역 설치를 지원하지 않는다고 하니 터미널에서 제공한 힌트대로 npm을 사용하여 설치를 하도록 한다.

npm init react-app my-app

본인이 생성한 프로젝트 폴더에서 package.json파일을 열어보면 터미널에서 파란 글씨로 안내해준 script를 볼 수 있다.

일단은 프로젝트를 실행.

npm run start

👉🏻create-react-app github

프로젝트 살펴보기

📁src
앞으로 생성할 모든 파일을 넣을 폴더.

src > index.js
익숙한 모습이 보인다.
root가 있고, root에서 App을 render하는 구조이다.
저 root는 public의 index.html에서 볼 수 있다.

다시 index.js 살펴보기
함수 컴포넌트인 App이 index.js에서 불려지는 것까지 익숙한 구조이다.

해보자고~!

콘텐츠부터 css까지 모두 새로 시작 할 수 있도록 싹다 지웠다.
이제 시작이다!

Button component

src폴더 안에 Button.js라는 파일을 하나 만들고 아래의 코드를 입력한다.

function Button({ text }) {
  return <button>{text}</button>;
}
export default Button;

Button을 보여줘야하는 파일에 Button을 import해보자.

import Button from './Button';
function App() {
  return (
    <div>
      <h1>welcome back, React!</h1>
      <Button text={'Continue'} />
    </div>
  );
}
export default App;

우리는 import된 component Button의 text가 props보 전달되는 state라는 것을 잘 알고 있다.
props의 type을 보다 편리하게 체크하기 위해 propTypes 설치.

npm i prop-types

import PropTypes from 'prop-types';
import Button from './Button';
function App() {
  return (
    <div>
      <h1>welcome back, React!</h1>
      <Button text={'Continue'} />
    </div>
  );
}
Button.prototype = {
  text: PropTypes.string.isRequired,
};
export default App;

text의 타입은 string이고 필수값이라는 것을 한눈에 파악할 수 있다. 슈퍼스윗~!

CSS도 Import 할 수 있다.

지금까지는 javaScript를 이용해서 요소에 직접 스타일을 해줬다면 이번엔 CSS파일을 만들어서 import해본다.
react에서의 css는 각각 모듈화해서 사용할 수 있기때문에 파일명은 아래와 같이 만들어야 한다.

//Button의 스타일을 지정하는 css파일을 만든다고 할 때
Button.moducle.css

.btn {
  background-color: tomato;
  color: white;
}

component와 마찬가지로 import해서 사용하면 된다.

import styles from './Button.module.css';
function Button({ text }) {
  return <button className={styles.btn}>{text}</button>;
}

export default Button;

토마토 색의 버튼이 보여진다.
내 경우는 App.module.css도 만들어서 App.js에 적용시켜놓은 상태이다.
여기서 개발자모드의 요소를 확인해보면

클래스명이 컴포넌트명-클래스명-랜덤문자형식으로 이루어 진 것을 볼 수 있는데, 저 랜덤문자 덕분에 다른 컴포넌트에서 동일한 클래스명이 사용되어도 스타일이 깨지는 일 없이 편리하게 사용할 수 있다.