[react] 기본 구조

잘 설명되어 있는 블로그 글을 요약, 추가 + 이 글을 덧붙임

 

<기본 폴더 구조>

public

- 가상 돔을 사용하기 때문에 실제 돔 필요. 즉 가상 돔이 들어갈 빈 껍데기가 필요.

- 일반적으로 이 폴더 내의 파일을 건드릴 일은 거의 없다.

 

src

- 리액트 개발이 이루어지는 메인 폴더

- 빠른 재빌드를 위해 여기 안의 파일만 webpack이 처리함.

 

<기본 파일>

한줄 정리: App.js에 정의한 컴포넌트들을 index.js에서 <App/>으로 사용하고, 이를 껍데기 템플릿인 index.html에 삽입한다.

 

index.js

- src 폴더에 있음

- 메인 프로그램

- 자바스크립트 엔트리 포인트

- html 템플릿 및 자바스크립트 컴포넌트 조합, 렌더링

 

App.js

- src 폴더에 있음

- 컴포넌트 정의

- 실제로 화면에 표시되는 내용 정의

- App 클래스는 리액트 컴포넌트 상속 받음

- render() 역시 리액트 컴포넌트로, 화면에 html 뷰를 생성하는 역할.

- html 코드를 렌더로 작성하여 리턴하고 export 한다.

 

 index.html

- public 폴더에 있음

- index.js에 대응

- html 템플릿 파일. 껍데기. 직접 표시되는 게 아니라 index.js가 렌더링한 결과 표시

- 제이쿼리, 부트스트랩, api 등을 삽입할 때에는 여기에 삽입