react 구조와 변수 적용

프로젝트 구조

• build : 빌드 시 생성되는 디렉토리
• node_modules : 리액트 실행에 필요한 모듈 디렉토리
• public : 정적 파일 디렉토리 (이미지 파일, html 등)
• src : 프로젝트 source 디렉토리 (작성하는 소스들)

변수 적용

<div id="id"></div>

let name = "hancoding";

// 자바스크립트
document.getElementById("id").innerHTML = name

// 리액트
<div>{name}</div>

리액트 렌더링 흐름 구조

App.js를

index.js에서 컴포넌트화 시켜

import App from ‘./App’; // App.js를 App으로 컴포넌트화 시킴

  ⁝

<App />

  ⁝

document.getElementById(’root’); // → index.html에 id가 root인 부분에 추가 (렌더링)

useState 사용

import React, {useState} from 'react';

⁝

let [name,setName] = useState("hi"); 로 적어도 let name = “hi” 와 같은 결과를 보여줌

참고 영상