React js 시작
겨울방학을 맞이하여 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
Author And Source
이 문제에 관하여(React js 시작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tank3a/React-js-시작저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)