`npm install` 또는 `yarn install` 명령어를 실행하면 이 디렉토리가 생성됩니다.
public/
정적 파일을 저장하는 곳입니다. HTML 파일과 아이콘, 이미지 등이 포함됩니다.
`index.html`: 페이지 템플릿으로, React 애플리케이션의 진입점입니다. 모든 React 컴포넌트는 이 파일의 `<div id="root"></div>`에 렌더링됩니다.
`favicon.ico`: 브라우저 탭에 표시되는 아이콘입니다.
src/
애플리케이션의 소스 코드(JS파일, CSS파일)가 포함된 디렉토리입니다.
webpack은 빠른 빌드를 위해서, src 디렉토리 내부만 처리합니다. 때문에, src 디렉토리 이외에 소스 코드 파일을 넣는 것은 webpack이 보질 못합니다.
App.js: 기본 React 컴포넌트 파일로, 보통 애플리케이션의 루트 컴포넌트로 사용됩니다.
App.css: `App.js`에 스타일을 적용하는 CSS 파일입니다.
App.test.js: `App.js`의 유닛 테스트를 포함합니다.
index.js: 자바스크립트 시작점으로, ReactDOM을 사용하여 React 컴포넌트를 실제 DOM에 렌더링 해줍니다.
index.css: 전체 애플리케이션에 적용되는 글로벌 CSS 파일입니다.
logo.svg: React 로고 이미지 파일입니다.
package.json과 package-lock.json
package.json: 프로젝트의 메타데이터를 포함하는 파일로, 프로젝트의 의존성, 스크립트, 이름, 버전 등을 정의합니다. `npm install`을 하였을 때 해당 파일을 통해 node-modules/에 라이브러리 등을 저장할 수 있습니다. 또한 앱을 시작하거나, 빌드, 테스트할 때 사용할 스크립트 등도 명시되어 있습니다.
package-lock.json: 동일한 의존성 버전을 사용하여 일관된 빌드를 보장할 수 있도록, 프로젝트의 정확한 의존성 트리를 잠그는 파일입니다.
package.json
pacakge.json에는 앱을 시작하거나, 빌드, 테스트할 때 사용할 스크립트 등이 명시되어 있습니다. React App을 시작하고 싶다면 npm run start를 입력 하면 되고, 빌드하고 싶다면 npm run build 명령어를 입력하면 됩니다.
💁 반드시 존재해야하는 파일들 아래 파일들은 이름이 수정되게 되면 React 애플리케이션이 정상 작동하지 않습니다.
1. public/index.html ← React 애플리케이션 진입점 2. src/index.js ← ReactDOM을 사용하여 실제 DOM에 렌더링하는 파일
index.html 페이지는 React 애플리케이션 default 진입점이기 때문에, 사이트 요청시 다른 페이지가 지정되어 있지 않으면 기본 페이지로 지정됩니다. `www.example.com`으로 요청한 경우 `www.example.com/index.html`으로 요청한 것과 같습니다.
SPA: Single Page Application
싱글 페이지 애플리케이션(SPA)은 하나의 페이지에 전체 페이지를 담아 동적으로 화면을 표현해줍니다. 아래 public/index.html과 src/index.js를 보도록 하겠습니다.
public/index.html & src/index.js
React 애플리케이션에 요청을 보내면 React 진입점인 public/index.html에 접근하게 됩니다. <div> 요소의 id가 root라고 되어 있는 것을 확인할 수 있습니다. 이제 자바스크립트의 시작점인 src/index.js에서 id가 root인 요소를 가져오고 그 요소 안에서 화면을 구성합니다. 기본적으로 요소 안에 <App />이라고 작성되어 있으며 <App />은 App.js 입니다.
즉, React Application에서는 index.html 페이지 하나만을 이용하여 페이지를 보여줍니다.
그럼 페이지가 하나만 있고 그 안에서 동적으로 화면이 변환된다면, 이전 화면 이동 등은 어떻게 해줄까요? 바로 History API를 사용합니다.
History API
back(): 세션 기록의 뒤 페이지로 이동하는 메소드
forward(): 세션 기록의 앞 페이지로 이동하는 메소드
go(): 지정한 세션 기록으로 이동하는 메소드, go(-1)은 바로 뒤 페이지, go(1)은 바로 앞 페이지로 이동합니다.
pushState(): 주어진 데이터를 세션 기록 스택에 넣는 메소드, 직렬화 가능한 모든 JS 객체를 저장하는 것이 가능합니다.
replaceState(): 세션 기록 스택의 데이터를 주어진 데이터로 교체하는 메소드
그럼 JS 파일들이 id가 root인 요소 안에서 화면을 구성하는데 어떻게 UI를 구현하는지 다음 JSX 포스팅에서 이어 하도록 하겠습니다.
