복습
https://shins99.tistory.com/63
[React] JSX 문법
복습 https://shins99.tistory.com/62 [React] JSX (JavaScript XML) 복습 https://shins99.tistory.com/61 [React] React 란? React란? - 사용자 인터페이스(UI)를 만들기 위해 사용되는 자바스크립트 라이브러리 - 싱글 페이지 애
shins99.tistory.com
DOM 속성(attribute)
- React에서는 모든 DOM 속성(attribute)을 카멜 표기법(camelCase)으로 표현
(HTML 속성 maxlength - > React에서 maxLength 표기)
- 예외적으로 aria-* 와 data-* 속성은 소문자로 표기, 사용자 지정 속성도 소문자로 표기
- HTML과는 다르게 표기해야 올바르게 동작하는 몇몇 DOM 속성도 존재
className
HTML 요소에 CSS 클래스를 사용하기 위해서 HTML에서는 class 속성을 사용
HTML
|
1
|
<div class="container"></div>
|
cs |
- JSX에서는 class 대신 className 속성 사용
(class 단어가 JS 문법에서 클래스(class)를 생성하기 위한 예약어이기 때문)
JSX
|
1
|
<div className="container"></div>
|
cs |
htmlFor
- HTML의 for 속성= js에서 반복문을 정의하는 for 키워드와 중복
(JSX에서는 htmlFor 속성으로 바꿔 사용)
|
1
2
3
4
5
6
7
8
|
export default function App() {
return (
<>
<label htmlFor="name">이름 : </label>
<input id="name" type="text"></input>
</>
);
}
|
cs |
엘리먼트(element)
- 엘리먼트(element)는 View에 렌더링 할 내용을 React에 알려주기 위한 수단
- React 애플리케이션을 구성하는 가장 작은 블록
React 엘리먼트
- React 엘리먼트는 HTML 태그 이름을 값으로 가지는 type 필드, 그 외 속성들을 값으로 전달받는 props 필드로 구성된 객체(object) 형태로 정의
- React는 이 객체를 읽어들여 DOM을 구성하고 최신 상태로 업데이트시 사용
- React 엘리먼트는 일반 객체(plain object)로 손쉽게 생성 가능 하지만 불변 객체(immutable object)이기 때문에 일단 생성된 후에는 상태나 속성을 변경할 수 없음
- React에서 UI를 업데이트하는 방법 : 새로운 엘리먼트를 생성, 이를 render() 메소드에 전달
|
1
|
const element = <p className="greeting">Hello, World</p>
|
cs |
루트 DOM 노드(Root DOM Node)
최종 렌더링된 HTML 코드
|
1
2
3
4
|
<div id="root">
<h1>Hello, World!</h1>
<p>React도 안녕!</p>
</div>
|
cs |
루트 DOM 노드(Root DOM Node) - React 애플리케이션에는 id 속성값이 root인 <div>요소
(이 내부에 들어가는 모든 요소들은 React DOM에서 관리)
- React 프로젝트 파일 중 public 폴더 index.html 파일안에 <body>요소 안에 루트 DOM 노드가 존재
Root DOM Node
|
1
|
<div id="root"></div>
|
cs |
- React 애플리케이션은 일반적으로 하나의 루트 DOM 노드를 가짐
- 기존 애플리케이션에 React를 순차적으로 도입하려는 경우 : 원하는 만큼의 독립된 루트 DOM 노드를 포함 가능
엘리먼트의 렌더링
1. index.js 파일 실행 (React 애플리케이션의 진입점)
2. 루트 DOM 요소를 createRoot() 함수에 전달
3. 새로운 루트 DOM 노드를 생성하여 반환
4. 반환된 루트 DOM 노드의 render() 메소드에 화면에 나타내길 원하는 엘리먼트들을 전달
5. View 렌더링
index.js의 초기 코드
|
1
2
3
4
5
6
7
8
9
10
11
|
import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const root = createRoot(document.getElementById("root"));
root.render(
<StrictMode>
<App />
</StrictMode>
);
|
cs |
엘리먼트 렌더링
|
1
2
3
4
5
6
7
8
|
import { createRoot } from "react-dom/client";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
const element = <h1>새로운 React 엘리먼트</h1>;
root.render(element);
|
cs |
'[React]' 카테고리의 다른 글
| [React] export와 import (0) | 2023.09.04 |
|---|---|
| [React] 컴포넌트(component) (0) | 2023.09.03 |
| [React] JSX 문법 (12) | 2023.09.01 |
| [React] JSX (JavaScript XML) (28) | 2023.08.30 |
| [React] React 란? (24) | 2023.08.29 |