REACT v1.0 </doc>

REACT

React는 Facebook에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 만들기 위해 사용됩니다. React는 컴포넌트 기반 아키텍처를 가지고 있으며, 각각의 컴포넌트는 독립적으로 동작하며 상태(state)를 가질 수 있습니다.

React에서는 가상돔(Virtual DOM)을 사용하여 효율적인 업데이트를 수행합니다. React 애플리케이션에서 상태가 변경되면, React는 이전 가상돔과 새로운 가상돔을 비교하여 변경된 부분만 실제 돔에 반영합니다. 이를 통해 불필요한 돔 조작을 최소화하고 성능을 향상시킵니다.

REACT 설치

Node.js 설치 React 애플리케이션을 개발하기 위해서는 Node.js가 설치되어 있어야 합니다. Node.js는 다음 링크에서 다운로드 받을 수 있습니다.

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는 React에서 UI를 생성하는 데 필요한 구성 요소(component)와 같은 JavaScript 코드를 생성하기 위해 사용됩니다. 이렇게 생성된 JavaScript 코드는 React에서 사용되는 createElement() 함수를 사용하여 가상돔(Virtual DOM) 객체를 생성합니다.

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

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

//hello jinhyunmi

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

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

function helloName(){
    return name.nick;
}

const name = {
    nick : "hyunmi",
}

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 App(){
//   return (
//     <div>
//       <h1>리액트</h1>
//     </div>
//   )
// }
// function clock(){
//   let clock = document.getElementById("clock");
    
//   setInterval(function(){
//     clock.innerHTML = new Date().toLocaleDateString();
//   }, 1000);
// }
// clock();

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

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

export default clock;

4. 컴포넌트

import React from "react";
import ReactDOM from "react-dom/client";
function Hello(){
    return <h1>Hello, webstoryboy</h1>
}
const element = <Hello />;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

import React from "react";
import ReactDOM from "react-dom/client";
function Welcome(props){
    return <h1>Hello, {props.name}</h1>
}

function App(){
    return (
    <div>
        <Welcome name="jin" />
        <Welcome name="hyunmi" />
        <Welcome name="jijiji" />
    </div>
    )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);    

5. props

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

function Hello(props){
    return <h1>Hello, {props.name}</h1>
}
const element = <Hello name="jin" />;

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

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

function Hello(props){
    return (
    <div>
        <div>{props.title1}</div>
        <div>{props.title2}</div>
        <div>{props.title3}</div>
        <div>{props.title4}</div>
    </div>
    );
}

const name = {
    name : "jinhyunmi",
    text : "hello",
    author : {
    name : "baby",
    ulr : "naver.com"
    }
}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello title1={name.name} title2={name.text} title3={name.author.name} title4={name.author.ulr}/>);