React 설치하기, 살짝 맛만보기

React 설치하기, 살짝 맛만보기

React는 Facebook에서 개발한 오픈소스 JavaScript 라이브러리로, UI를 만들기 위해 사용됩니다.

 

 

React는 가상 DOM(virtual DOM)을 사용하여, 성능을 최적화합니다.

이것은 변경된 부분만 실제 DOM에 반영하는 것이 아니라, 전체 DOM을 다시 그리는 것이 아니라, 가상 DOM에서 변경 사항을 반영한 후에 변경된 부분만 실제 DOM에 적용하는 방식으로 작동합니다.

이를 통해 빠른 렌더링 속도를 유지하면서도, 높은 유연성과 성능을 제공합니다.

 

 

React 설치

Node.js 설치하기
https://nodejs.org/ko

React를 사용하기 위해서는 Node.js가 필요합니다. Node.js는 자바스크립트 런타임 환경입니다.

 

 

 

 

 

 

1. React 기본 개념 익히기

1. HELLO WORLD 출력하기

import React from "react";
import ReactDOM from "react-dom/client";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>HELLO THE WORLD</h1>);

//HELLO THE WORLD

 

 

 

 

2. JSX

JSX는 JavaScript XML의 약자로, React에서 사용되는 자바스크립트의 확장 문법입니다.
JSX는 HTML과 유사한 구문으로 작성되며, React 요소를 생성하는 데 사용됩니다.

const name = "KDH";
const hello = <h1>Hello {name}</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(hello);

//Hello KDH


function helloName(){
    return name.nick;
}

const name = {
    nick : "KDH",
}

const hello = <h1>Hello, {helloName()}</h1>

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(hello);

//Hello, KDH

 

 

 

3. 렌더링

객체와 함수를 같이 사용한 경우입니다.

 function clock(){
const element = (

    <div>hello, KDH</div>
    <h2>지금은 {new Date().toLocaleDateString()}입니다.</h2>	//월,일 데이터

);

ReactDOM.render(element, document.getElementById('root'));
}

export default clock

//지금은 05. 08.입니다

 

React는 Virtual DOM을 사용하여 렌더링을 수행합니다. Virtual DOM은 브라우저의 실제 DOM과 동일한 구조를 가지지만, 메모리 상에만 존재하며 실제로 브라우저에 그려지지 않습니다.

 

React는 상태(state)가 변경되면 Virtual DOM에서 해당 변경사항을 반영하고, 이전의 Virtual DOM과 새로운 Virtual DOM을 비교하여 변경된 부분만 실제 DOM에 업데이트합니다.