4. React 구조도

react 폴더 구조

REACT-TEST 
	└ node_modules
    └ public
    └ src 
    	└ App.css
        └ App.js
        └ index.css
        └ index.js
        └ logo.svg
    └ package-lock.json
    └ package.json

1. node_modules
현재 프로젝트에 포함된 라이브러리들이 설치되어있는 폴더.

2. public
정적 파일이 포함되는 폴더.
컴파일이 필요없는 파일들이 위치한다.

3. src
리액트 내부에서 작성하는 대부분의 폴더
파일들은 명령어에 따라 js로 컴파일이 진행된다.

컴포넌트 만들어보며 구조 파악

Hello.js 파일 생성

src 폴더 아래 Hello.js 파일을 생성한다.

그 다음 아래와 같이 내용을 작성한다.

주석에 적어놓은대로 함수형 컴포넌트 형태이며 컴포넌트들은 xml형태를 return 해야 한다.

export default Hello; 

구문을 추가해 외부에서 컴포넌트를 불러올 수 있도록 한다.

APP.js 파일 수정

src 폴더 아래 APP.js 파일을 다음과 같이 수정한다.

import Hello from './Hello'

구문을 통해 Hello 컴포넌트를 불러온다.

만약 폴더 안에 있다면

import Hello from './hello/Hello'

로 불러오면 됨.

해당 폴더 밖에 있는 경우

import Hello from '../Hello'

그 후 return 안에서 불러온 컴포넌트를 사용하면 된다.

결과 화면은 다음과 같다.

어떻게 이렇게 반영이 되는 것일까?

index.js

src 폴더 안에 index.js 파일을 보자.

react dom을 생성하는데 root라는 아이디를 읽어온다.

그럼 root는 어디있는걸까

index.html

public 폴더 안에 index.html을 보자.

이 안에 id가 root인 태그가 존재한다.

결과적으로 컴포넌트를 생성하면 렌더링 시에 html형태로 만들어져서 화면에 그려지는 것이다.

출처 : https://velog.io/@sisofiy626/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%9D%98-%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%A1%B0