REACT - REACT를 시작해봅시다.

REACT란

- React는 JavaScript를 사용하여 사용자 인터페이스(UI)를 구축하기 위한 오픈 소스 프론트엔드 라이브러리입니다.

- React는 가상 DOM(Virtual DOM)을 사용하여 효율적으로 UI 업데이트를 관리합니다. 가상 DOM은 메모리에 존재하는 가벼운 복사본으로, React는 실제 DOM과 비교하여 변경된 부분만 업데이트합니다. 이를 통해 성능이 향상되고 빠른 UI 렌더링이 가능해집니다.

REACT설치하기

- React는 Node.js 환경에서 동작하므로, Node.js를 먼저 설치해야 합니다. Node.js는 공식 홈페이지에서 다운로드할 수 있습니다.

npm create-react-app react1

- 터미널에서 설치하고 싶은 문서로 이동한 뒤 위의 문구를 입력합니다.

Compiled successfully!

You can now view react1 in the browser.

    Local:            http://localhost:3000
    On Your Network:  http://192.168.1.191:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

- 이러한 문구가 뜨면 성공한 것입니다.

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 World</h1>);

//Hello World

2. JSX

JSX(JavaScript XML)는 React에서 사용되는 JavaScript의 확장 문법입니다. JSX는 JavaScript 코드 안에 XML과 비슷한 문법을 사용하여 React 컴포넌트의 구조와 모양을 정의하는 데 사용됩니다.

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

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(hello);
// hello kebab00

객체와 함수를 같이 사용한 경우

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

function helloName(){
    return name.nick;
}

const name = {
    nick : "kebab00",
}
const hello = <h1>hello, {helloName()}</h1>;
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(hello);

3. 랜더링

import React from 'react';
import ReactDOM from 'react-dom';

// function clock(){
//   let clock = document.getElementById('clock');


//   setInterval(function(){
//     clock.innerHTML = new Date().toLocaleTimeString();
//   },1000);
// }
// clock();

function clock(){
const element = (
    <div>
    <div>hello, kebab00</div>
    <h2>지금은 {new Date().toLocaleDateString()}입니다.</h2>
    </div>
); 
    ReactDOM.render(element, document.getElementById('root'));
}

export default clock;

- 끝!