[React] 프로젝트 구동 방식

 

1. React 프로젝트 내 구동 방식

• 프로젝트 구조

• 페이지 구조

1-1. index.js

App이라는 컴포넌트를 가지고 있다!

App은 어디에 있는걸까?

▼
▼

 

1-2. App.js

App.js 안에서 이렇게 Function 이름을 App으로 명시하고, html 코드를 반환하고 있다.

그렇다면 App을 감싸고 있는 이 root는 어디에 있는걸까?

▼
▼

1-3. index.html

• 즉, 전체적으로 보자면,
  •  index.js 파일이 전체 프로젝트 구조를 관리하며, 전체 DOM 구조를 렌더링하는 역할을 한다
    • index.html 코드 안에 App.js return html 코드가 있는 구조로 렌더링함
  • index.html은 가장 겉 단에서 기본적인 html 구조를 담당함
  • App.js는 개발자가 구현하는 페이지들을 return 한다.

- 참고) 기본적인 css는 `App.css`, `index.css` 로 적용되어 있으며, 이 외의 페이지는 개발자가 원하는 대로 추가 가능!

 

2. React의 본질

공통 코드를 묶어 사용자 정의 태그를 만드는 것이 목적 ⇒ 컴포넌트!

기존에는 이렇게 HTML 코드에 일일이 하드코딩 된 애들을

컴포넌트화 해서 관리해주는 것!