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

+ Recent posts