CRA 장점

• 개발 서버에 접근가능
• 자동으로 새로고침 가능
• 즉각적으로 애플리케이션 안에 CSS 포함
• 자동실행
• transcompile 지원 > 브라우저 별 해석할 수 있는 js버전이 다른데 , React는 babel을 기본으로 내장하고 있어 자동으로 해석할 수 있도록 변환을 지원
• 코드 난독화, 압축 등을 지원하는 번들링, Webpack을 지원

publish 명령어 갖고있다.

• 코드 압축, 좀 더 빠르게 동작

CRA위해

1. nodejs 다운

2. npx install (npx 작동되는지 확인)

node-v / npx 커맨드 실행시킬 수 있는지 확인할 것

npx create-react-app [프로젝트명]

package.json 안에서 모든 스크립트들을 찾아낼 수 있다.

npm start( 개발용 서버 만들어짐 )
src 폴더 - 모든 게 다 src에 있어야함
index.js => ReactDoM & root 존재

nodejs가 있기에 파일들을 각각 분리시키는게 가능

한 파일 당 한 컴포넌트 , index.js에서 그 컴포넌트들을 import해서 사용

• 리액트 애플리케이션을 렌더링해줄 뿐인 index
• 컴포넌트 App.js

divide & conqule (분할 & 정복)

style들도 modular(모듈러)가 될 수 있다.

css modules

----.module.css 만 붙인다면 이름 상관없음

• but create-react-app은 랜덤하게 클래스 이름을 만들어낸다.

다른 클래스 이름 기억할 필요없다.

className={해당 style 클래스이름} => 컴포넌트들이나 스타일들 독립적으로 유지 가능