Class v1.0 </doc>

REACT

REACT는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됩니다.

REACT는 페이스북이 개발하고 유지 관리하는 오픈 소스 JavaScript 라이브러리로, 사용자 인터페이스를 구축하는 데 사용됩니다.
REACT는 효율적으로 웹 페이지의 UI를 업데이트하고 관리하는 데 초점을 맞추고 있으며, 가상 DOM(Virtual DOM)과 같은 기술을 통해 높은 성능을 제공합니다.

컴포넌트 기반 아키텍처: REACT는 재사용 가능한 UI 구성 요소인 컴포넌트를 사용하여 코드를 모듈화하고 개발 효율성을 높입니다.

가상 DOM: 가상 DOM은 실제 DOM의 가벼운 사본으로, 변경 사항을 먼저 가상 DOM에 적용한 다음 실제 DOM에 필요한 최소한의 변경만 반영하여 성능을 향상시킵니다.

단방향 데이터 흐름: REACT는 데이터가 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 흐르는 구조를 가지고 있어, 데이터 관리가 더욱 간단해집니다.

JSX: JSX는 JavaScript와 HTML을 섞은 문법으로, 컴포넌트 내에서 마크업과 로직을 동시에 작성할 수 있게 해 줍니다. 이는 코드 가독성을 높이고 유지 관리를 용이하게 합니다.

REACT 설치

React를 설치하고 사용하려면 Node.js와 npm(Node Package Manager)이 설치되어 있어야 합니다.
Node.js는 JavaScript를 실행할 수 있는 런타임 환경이며, npm은 JavaScript 패키지를 관리하는 도구입니다.

1. Node.js와 npm 설치

다운로드 및 설치가 완료되면, Node.js와 함께 제공되는 npm도 자동으로 설치됩니다.

2. Create React App 설치

cd react1
npm start

명령어를 실행하면 브라우저에서 http://localhost:3000 주소로 애플리케이션이 자동으로 열립니다.

Compiled successfully!

You can now view react1 in the browser.

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

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

webpack compiled successfully

3. scss 설치

4. router 설치

5. axios 설치

6. prop 설치

7. gsap 설치

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에서 사용되는 문법입니다. JSX는 JavaScript 코드 내에서 XML 형태로 작성하는 것을 말하며, React 컴포넌트를 정의할 때 사용됩니다.

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

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

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

// hello leeyanggoo

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

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

function helloName(){
  return name.nick;
}

const name = {
  nick: "leeyanggoo"
}

const hello = <h1>hello, {helloName()}</h1> // 중괄호 안에 함수명을 넣으면 실행

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

// hello, leeyanggoo

3. 렌더링

React에서 렌더링(Rendering)은 UI를 구성하는 컴포넌트를 가상 DOM(Virtual DOM)에 적용하여, 실제 DOM에 반영하는 과정을 말합니다.

import React from 'react';   // imr
import ReactDOM from 'react-dom';    // imrd

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

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

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

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

export default clock;

4. 컴포넌트

React 컴포넌트는 독립적이고 재사용 가능한 UI 구성 요소로, 웹 애플리케이션의 다양한 부분을 구축하는 데 사용됩니다.

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

function Hello() {
    return <h1>Hello, leeyanggoo</h1>
}

const element = <Hello />

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

export default Hello

// Hello, leeyanggoo

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 = 'lee' />
        <Welcome name = 'yang' />
        <Welcome name = 'goo' />
    </div>  // 여러 컴포넌트를 불러올 땐 부모 박스가 필요함
    )
}

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

// Hello, lee
// Hello, yang
// Hello, goo
// 페이지 구축 시 header, main, footer 등을 불러오는 방식

5. props

Props(속성)는 React 컴포넌트에 전달되는 데이터로, 부모 컴포넌트로부터 자식 컴포넌트에 값을 전달하는 데 사용되며, 컴포넌트 내에서 읽기 전용입니다.

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

function Hello(props){
    return <h1>Hello, {props.name}</h1>
}
const element = <Hello name = 'leeyanggoo' />

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