겨울방학을 맞이하여 React 기초를 다지고자 React 강의에서 배운 내용을 이곳에 기록하고자 합니다.

강의는 생활코딩님의 React 강의와 노마드 코더님의 ReactJS로 영화 웹 서비스 만들기를 통해 학습한 내용을 기반으로 작성할 예정입니다.

create-react-app(CRA) 설치

create-react app 공식 깃허브에서는 다음을 권장하고 있습니다.

터미널에 아래와 같이 작성

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

여기서 my-app은 앞으로 진행할 react프로젝트의 폴더명입니다. 본인이 희망하는 이름으로 변경해도 무관하지만, react라는 폴더명은 불가합니다.

또 다른 방법은 npm -install를 사용하는 방법입니다.

npm -install create-react-app
cd my-app
create-react-app .

이 방법은 my-app이라는 폴더 위치로 이동한 후, create-react-app을 적용시키는 방법입니다. 위 방법과의 차이는, npm을 이용하면 create-react-app 버전을 업데이트하기 위해 수동으로 확인해야 한다는 점 입니다.

Module.css

CRA의 장점 중 하나는 css를 전역으로 지정할 필요도, 각 태그마다 지정할 필요없이 css파일을 module화시켜 사용할 수 있다는 점입니다. 즉, React가 랜덤한 클래스명을 만들어주고, 그것을 css module과 묶어주기 때문에 다른 곳에서 특정 클래스명을 다시 사용함으로써 발생하는 중복을 걱정할 필요가 없어졌습니다.

<Button.module.css>
.btn {
    background-color: aquamarine;
    border: none;
    border-radius: 10px;
    font-size: 16px;
}

<App.js>
import style from "./Button.module.css";
...
<button className={style.btn}>{text}</button>)

개발자 도구에서 위의 button은 다음과 같이 보이게 됩니다.

npm scripts

위의 방법으로 설치한다면, react에서 기본적으로 다음과 같은 script를 제공합니다.

"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"

예를 들어 react app을 실행하고 싶다면 npm run start 또는 npm start를 해당 폴더 위치에서 터미널에 작성하면 됩니다.
하지만 단순히 start를 한다면 출력되는 리소스가 크기 때문에 배포시에는npm run build를 한 뒤,
npx serve -s build 를 통한 build폴더를 실행시켜야 사용자의 자원 부담이 줄어듭니다.

참고
- 생활코딩 react강의: https://www.youtube.com/watch?v=C9l-dQTeW7k&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=5
- create-react-app 공식문서: https://github.com/facebook/create-react-app
- React 공식 문서: https://reactjs.org/docs/create-a-new-react-app.html#create-react-app