[React] React 설치 및 기본 구조

npx create-react-app .

react 설치

 

npm vs npx?

npm(node package manager): 저장소 역할, npm ~~로 설치하면 dependencies라는 레지스트리 안에 라이브러리들이 설치됨, 어플리케이션을 켜거나 npm run start, 배포하기 위해 빌드할 때 npm run build 사용, package.json에 정보가 있음, -g라는 플래그를 주지 않으면 로컬로 다운받아짐, 그러면 node_modules 디렉터리에 받아짐, 플래그를 주면 컴퓨터 안에 bin, use/local/bin in linux, appdata/npm in window 에 받아짐

npx: 레지스트리에 있는 것을 다운받지 않고 가져와서 쓸 수 있음, 디스크 공간 낭비 x, 항상 최신 버전 사용 가능

client 디렉터리 안이 create-react-app을 설치함으로써 생긴 것들

npm run start

react를 실행하려면 위 문장을 입력하면 됨

왜 아무런 설정도 없이 이 문장으로 react를 실행할 수 있는가? 하면 리액트를 설치함으로써 package.json 안에 사용할 수 있는 스크립트들이 자동으로 생김

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

그러면 App.js의 내용들이 렌더링되어 초기 리액트 페이지가 생성됨

//index.html

<div id="root"></div>


//index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

index.html에 id='root'이기 때문에 getElementById를 'root'로 받아와야 제대로된 페이지가 뜰 수 있음

webpack이 관리하는 부분은 src만. public은 관리하지 않음

때문에 이미지를 넣을 때는 pulibc이 아닌 src 디렉터리에 넣어주어야 webpack의 기능이 작동할 수 있음