React 기본 정리

이름이 수정되면 안되는 파일

 

• public / index.html : 페이지 템플릿
  • public 폴더에는 index.html에서 사용하는 파일들만 넣는다. favicon 파일을 예로 들 수 있다.
• src / index.js : 자바스크립트 시작점
  • src 폴더에는 JS 파일과 CSS 파일들을 넣는다. 또한 Webpack은 src 폴더에 있는 파일만 확인한다. 때문에 해당 폴더 외의 폴더의 파일들은 Webpack에 의해 처리되지 않는다. (대부분의 리액트 소스 코드들은 이곳에 작성하면 된다.)

*Webpack은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다.

 

• package.json : 해당 프로젝트에 대한 정보들이 들어있다. 프로젝트 이름, 버전, 필요한 라이브러리와 라이브러리의 버전들이 명시되어 있다. 앱을 시작할 때 사용할 스크립트, 앱을 빌드할 때, 테스트할 때 사용할 스크립트 등이 명시되어 있다.

 

 

SPA (Single Page Application)

 

기존의 애플리케이션은 a페이지를 만들기 위해 a.html, b 페이지를 만들기 위해 b.html을 만들었다. 이러한 방식을 MPA(Multi Page Application)이라고 한다.

 

요즘은 웹사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 렌더링하는데 이것을 SPA라고 한다. 

 

SPA에서는 HTML5의 History API를 사용하여 페이지 전환이 가능하게 만든다. 자바스크립트 영역에서 History API를 이용해서 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 한다.

 

 

 

JSX (JavaScript Syntax extension)

 

JSX는 자바스크립트 확장 문법이다. 리액트에서는 JSX를 이용하여 화면에 UI가 렌더링되는 모습을 나타내 준다.(컴포넌트의 return 되는 부분!)

 

JSX를 이용하면 UI를 나타낼 때 자바스크립트 로직과 HTML 마크업을 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있다.