김도현[ KDH ]

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

React는 가상 DOM(virtual DOM)을 사용하여, 성능을 최적화합니다. 이것은 변경된 부분만 실제 DOM에 반영하는 것이 아니라, 전체 DOM을 다시 그리는 것이 아니라, 가상 DOM에서 변경 사항을 반영한 후에 변경된 부분만 실제 DOM에 적용하는 방식으로 작동합니다. 이를 통해 빠른 렌더링 속도를 유지하면서도, 높은 유연성과 성능을 제공합니다.

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

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

npx create-react-app react1
//리액트 폴더와 파일 만들기

We suggest that you begin by typing:

cd react1
npm start
//차례대로 치기

Happy hacking!

scss 설치

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

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

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

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

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

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

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

export default clock

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

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

function Hello(){
    return <h1>Hello, KDH</h1>
}
const element = <Hello />

ReactDOM.render(element, document.getElementById("root"));

export default Hello    

//Hello, KDH


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 = "KDH" />
      <Welcome name = "kDH!!!" />
      <Welcome name = " Welcome^^" />
    </div>
  )
}

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

//Hello, KDH
//Hello, kDH!!!
//Hello, Welcome^^

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위한 메커니즘

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

function Hello(props){
    return <h1>Hello, {props.name}</h1>
}

const element = <Hello name = "KDH!!!" />

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);
    
//Hello, KDH!!!

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

function Hello(props){
    return (
    <div>
        <div>{props.title}</div>
        <div>{props.talk}</div>
        <div>{props.who}</div>
        <div>{props.link}</div>
    </div>
    )
}

const name = {
    name : "KDH!",
    text : "hi",
    author : {
    name : "babo",
    ulr : "naver.com"
    }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello title={name.name} talk={name.text} who={name.author.name} link={name.author.ulr}/>);

//KDH!
//hi
//babo
//naver.com

React

React

React

React 설치

scss 설치

React 기본 개념 익히기

1. HELLO WORLD 출력하기

2. JSX

3. 렌더링

4. 컴퍼넌트

5. props