Elements 란?
어떤 물체를 구성하는 성분
리액트 앱을 구성하는 가장 작은 블록들
생김새
리액트 Elements는 자바스크립트 객체 형태로 존재
마음대로 생성되면 바꿀 수 없는 불변성
타입이 문자열일 경우
타입이 문자열이 아닐 경우
Element를 만드는 방식, type은 태그 이름, props가 속성, children이 자식 태그
Button Element가 ConfirmDialog Element에 속해 있다.
특징
불변성 - Elements 생성 후에는 children이나 attributes를 바꿀 수 없다!
렌더링하기
Root DOM Node
<div id="root"></div>
VirtureDOM에서 실제 DOM으로 랜더링되는 과정
const element = <h1>안녕, 리액트!</h1>;
ReactDOM.render(element, document.getElementById('root'));
실습 - 시계만들기
import React from "react";
function Clock(props) {
return (
<div>
<h1>안녕, 리액트!!!!</h1>
<h2>지금 시간 : {new Date().toLocaleTimeString()}</h2>
</div>
);
}
export default Clock;
다음과 같이 시계 엘레멘트를 만든다.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Clock from './chapter_04/Clock';
setInterval(() => {
ReactDOM.render(
<React.StrictMode>
<Clock />
</React.StrictMode>,
document.getElementById('root')
);
}, 1000);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
index.js로 가서 setInterval() 함수를 사용하여 1초간 시간을 갱신하게끔 한다.
터미널에서 npm start를 치면 브라우저가 열러서 시계가 작동되는 것을 확인할 수 있다.
'React' 카테고리의 다른 글
[React] State and Lifecycle (0) | 2024.08.03 |
---|---|
[React] Components 와 Props (0) | 2024.08.01 |
[React] JSX 의 장점과 사용법 (0) | 2024.07.30 |
[React] create-react-app (0) | 2024.07.29 |
[React] React 란? & 연동하기 (0) | 2024.07.29 |