리액트 사용하기

React

리액트(React)는 Facebook에서 개발한 UI 라이브러리로, 웹 및 모바일 애플리케이션 개발에 사용됩니다. 리액트는 빠른 UI 개발과 관리를 위해 선언적(Declarative) 및 컴포넌트 기반(Component-based) 아키텍처를 사용합니다.

리액트는 가상돔(Virtual DOM)을 사용하여 UI를 렌더링하고, 변화가 필요한 부분만 업데이트하여 빠른 렌더링 속도와 성능을 제공합니다. 이를 통해, 대규모 웹 애플리케이션을 개발할 때 생기는 복잡성을 줄일 수 있습니다.

또한, 리액트는 Flux 아키텍처에서 영감을 받은 단방향 데이터 흐름을 사용하여 상태 관리를 용이하게 합니다. 이를 통해, 애플리케이션의 데이터 관리와 업데이트가 간단하고 예측 가능하며, 디버깅과 유지 보수가 용이해집니다.

리액트는 간단한 기본 구조를 가지고 있으며, 다른 라이브러리와의 통합도 용이합니다. 또한, 라이브러리나 프레임워크와의 호환성이 높고, 라이브러리의 생태계가 활성화되어 있어, 다양한 문제를 해결하기 위한 다양한 라이브러리와 플러그인이 존재합니다.

 

REACT 설치

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

Node.js 설치하기 : Node.js 공식 사이트(https://nodejs.org)에서 다운로드 및 설치 가능합니다. 버전은 최신 버전을 설치하면 됩니다.

npx create-react-app react1

cd react1
npm start

Compiled successfully!

    You can now view react1 in the browser.
    
      Local:            http://localhost:3000
      On Your Network:  http://192.168.0.147: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에서 UI를 만드는 데 사용되는 문법입니다.
JSX는 JavaScript의 확장 문법이며, HTML과 유사한 구문을 사용하여 React 컴포넌트의 렌더링을 정의합니다.

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

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

//hello jinyong

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

function helloName(){
    return name.nick;
}

const name = {
    nick : "jinyong",
}

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

//hello jinyong

3. 렌더링

// function clock(){
//   let clock = document.getElementById("clock");
    
//   setInterval(function(){
//     clock.innerHTML = new Date().toLocaleDateString();
//   }, 1000);
// }
// clock();

function clock(){
    const element = (
    <div>
        <div>hello, jinyong</div>
        <h2>지금은 {new Date().toDateString()}입니다.</h2>
    </div>
    );

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

export default clock;