[React]구조파악하기

리액트 구조

React를 설치시 여러 폴더 및 파일들이 설치가 됩니다.

리액트가 설치 되었을때 보여지는 폴더 구조

디렉토리 종류로는

• node_modules : 모듈 패키지들이 위치 하는 폴더이다. 'npm install / yarn' 을 통해 설치를 할 수 있다.
  node를 통해 package.json 안에 저장 된 패키지들을 불러 올 수도 있다.
• public : static 자원폴더, 실제 html이 구현 되는 폴더로 보면 편하다. 리액트는 가상DOM 을 이용하여 부분 부분 나눠서 구현을 하는데, 그 부분에서 실제 DOM 역할을 해주는 html이 있는 폴더다.
• src : 리액트 개발을 하는데 사용하는 폴더이다. 이 부분이 리액트에서의 메인이고,
  이 폴더에서 파일을 작성하고 수정하고 한다.

1. Public

• public 폴더 (디렉토리)는 정적 파일을 담고 있다. 웹 브라우저 (보여지는 곳)의 html 및 img 등의 파일들을 담고 있다.
  1. favicon.ico - 웹사이트 상단 부분에 위치하는 파비콘의 이미지이다.
  2. index.html - 리액트로 구현 된 가상DOM을 웹 브라우저로 보여주는 html 파일이다.
  3. manifest.json - 웹앱 매니페스트로 앱에 대한 정보를 담고있는 JSON 파일이다.

pubilc 폴더안에 index.html 페이지를 열었을때 보이는 화면이다.

• 일반 html의 구성으로 되어있다.react를 통해 만든 컴포넌트를 id = "root" 엘리먼트 안에 들어가도록 되어있다.
• <div id="root"></div>

2. src

src 폴더는 React 를 구성하는 폴더라고 할 수 있다.
1. App.css - App.js에 대한 css 파일
2. App.js - 작업을 하는 코드를 작성하는 페이지 react의 경우 해당 js 파일에서 구현을 한다.
3. App.test.js - react 구성 요소를 테스트하는데 사용되는 파일
4. index.js - src 폴더에서 가장 상위에 있는 파일이다.

2-1. index.js

index.js 파일이다. App.js에 생선된 리액트 코드를 출력하고 그 코드를 index.html로
넘겨주는 역할을 한다.

2-2. App.js

App.js return 함수를 확인하면 HTML 코드와 같은 형식으로 작성이 되어있다.
이러한 형식의 코드가 JSX라고 한다.

맨 처음 리액트를 실행했을때 웹페이지에 나왔던 화면이 이부분이다.
앞으로도 이부분에 코드를 작성하고 수정을 하게 된다.

JSX란

JaveScript의 확장 문법이고, XML과 비슷하게 생겼다.
이 형식으로 작성된 코드는 브라우저에서 실행되기 전 코드가 번들링 될때, 바벨을 사용하여
일반 자바스크립트 형태의 코드로 변환되어 출력이 된다.

왼쪽 부분의 JSX 코드가 JavaScript로 변환 된 코드를 확인 할수있다.

해당 부분의 이해와 학습을 위한 Babel URL - https://babeljs.io/