리액트 정리하기

REACT란 무엇인가 !

React는 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스를 만들기 위해 사용됩니다.

React는 컴포넌트 기반 아키텍처를 사용하며, 각 컴포넌트는 자체적으로 동작하며 다른 컴포넌트와 결합하여 전체 애플리케이션을 구성합니다. React는 가상 DOM (Virtual DOM)을 사용하여 성능을 최적화합니다. 이는 변경된 부분만 실제 DOM에 반영하여 전체 페이지를 다시 렌더링하는 것보다 더 빠르게 업데이트할 수 있도록 합니다. React는 또한 JSX라는 자체 문법을 사용하여 자바스크립트 코드 안에 HTML과 유사한 구문을 작성할 수 있도록 합니다.

 

 

REACT 설치하는 방법

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

React 애플리케이션을 개발하려면 먼저 Node.js를 설치해야 합니다. Node.js는 서버 측 자바스크립트 실행 환경입니다. Node.js를 설치하면 npm(Node Package Manager)도 함께 설치됩니다. npm은 React를 비롯한 다양한 자바스크립트 패키지를 관리하는 도구입니다.

 

Node.js를 다 설치했다면 , vs 코드를 이용해 코드를 열어줍니다.

npx 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.72: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 출력하는 방법입니다.

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

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

출력값으로 HELLO WORLD가 출력됩니다.

 

JSX는 JavaScript XML의 약어로, React에서 UI를 구성하기 위한 문법입니다. JSX는 JavaScript의 확장 문법으로, XML과 유사한 문법을 사용하여 JavaScript 코드 안에 HTML 요소를 삽입할 수 있게 해줍니다.

 

const name = "yuna";
const hello = <h1>hello {name}</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(hello);

출력값으로 hello yuyu가 출력됩니다.

 

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

function helloName(){
    return name.nick;
}
const name = {
    nick : "yuyu",
}
const hello = <h1>Hello, {helloName()}</h1>;

출력값으로 hello, yuyu가 출력됩니다.

 

3. 랜더링

// function clock(){
//   let clock = document.getElementById("clock");
//   setInterval(function(){
//     clock.innerHTML = new Date().toLocaleDateString();
//   }, 1000);
// }
// clock();
function clock(){
    const element = (
    <div>
        <div>hello, yuyu</div>
        <h2>지금은 {new Date().toLocaleDateString()}입니다. </h2>
    </div>
    );
    ReactDOM.render(element, document.getElementById('root'));
}
export default clock;

이 값을 출력하면 , hello, yuyu

 

지금은 5월 11일 입니다.로 오늘 날짜가 뜹니다.

 

4. 컴포넌트

import React from "react";
import ReactDOM from "react-dom/client";
function Hello(){
    return <h1>Hello, yuyu</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 = "yu" />
        <Welcome name = "you" />
        <Welcome name = "yuyuyu" />
    </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 = "yuyu" />;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);