Skip to main content

REACT

seolheeone.tistory.com

REACT

❤️ REACT 개념

React는 Facebook에서 개발한 자바스크립트 라이브러리입니다. React는 웹 애플리케이션의 사용자 인터페이스를 구축하기 위한 컴포넌트 기반 접근 방식을 사용합니다.

React는 Facebook에서 개발한 자바스크립트 라이브러리입니다. React는 웹 애플리케이션의 사용자 인터페이스를 구축하기 위한 컴포넌트 기반 접근 방식을 사용합니다. 이러한 방식은 애플리케이션의 복잡도를 줄이고 유지 보수성을 높이는데 도움이 됩니다. React는 가상 DOM(Virtual DOM) 개념을 사용하여 애플리케이션의 성능을 최적화합니다. React는 데이터가 변경될 때마다 전체 페이지를 다시 로드하는 것이 아니라 변경된 부분만 업데이트합니다. 이는 더 나은 사용자 경험을 제공하고, 빠른 애플리케이션 응답 속도를 유지하는 데 도움이 됩니다.

🧡 REACT 설치

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

Node.js 설치: React를 설치하려면 먼저 Node.js를 설치해야 합니다. Node.js는 JavaScript 실행 환경을 제공합니다. https://nodejs.org/ko/ 에서 다운로드할 수 있습니다.
NPM 설치: Node.js를 설치하면 NPM(Node Package Manager)도 함께 설치됩니다. NPM은 Node.js 패키지를 설치, 관리할 수 있는 패키지 매니저입니다. 터미널(혹은 명령 프롬프트)에서 npm -v 명령어를 실행하여 NPM이 제대로 설치되었는지 확인할 수 있습니다.

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.0.143:3000

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

webpack compiled successfully

scss 설치

npm install node-sass

router 설치

npm install react-router-dom

axios 설치

npm install axios

prop-types 설치

npm install prop-types

gsap 설치

npm i 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는 React에서 사용되는 JavaScript의 확장 문법입니다. JSX를 사용하면 HTML과 유사한 문법으로 React 컴포넌트를 작성할 수 있습니다. JSX는 React에서 가상 DOM을 생성하는 데 사용되며, 더 간결하고 직관적인 코드를 작성할 수 있도록 도와줍니다.

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

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

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

//hello cheonseolhee

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

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

function helloName(){
    return name.nick;
}

const name = {
    nick : "seolhee",
}

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

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

//hello, seolhee

3. 렌더링

React 렌더링은 사용자 인터페이스(UI)를 작은 단위인 컴포넌트로 구성하여, 데이터가 변경될 때마다 해당 부분만 새로 그려주는 방식으로 동작합니다. Virtual DOM은 변경된 부분만 실제 DOM에 반영함으로써, 불필요한 렌더링을 최소화하고 UI의 속도와 성능을 향상시킵니다. 이를 통해 React는 대규모 애플리케이션에서도 높은 성능을 유지하면서, 생산성도 높일 수 있는 인기 있는 프론트엔드 라이브러리입니다.


리액트

//리액트
import React from 'react';
import ReactDOM from 'react-dom';

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

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

export default clock;

자바스크립트

//자바스크립트
function clock(){
  let clock = document.getElementById("clock");

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

4. 컴퍼넌트

리액트 컴포넌트(React component)는 UI를 구성하는 독립적인 모듈이며, 리액트 애플리케이션을 구성하는 기본적인 빌딩 블록입니다. 컴포넌트는 프로퍼티(props)와 상태(state)를 가질 수 있으며, 이를 활용하여 동적인 UI를 구성할 수 있습니다.

01.

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

function Hello(){
    return <h1>hello, seolhee</h1>
}
const element = <Hello />;

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

//hello, seolhee

02.

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

function Welcome(props){
    return <h1>hello, {props.name}
}

function App(){
    return (
        <div>
            <Welcome name="cheon" />
            <Welcome name="seol"/>
            <Welcome name="hee"/>
        </div>
    )
}


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


//hello, cheon
//hello, seol
//hello, hee

03.

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

function formatDate(date){
    return date.toLocaleDateString();
}

function Comment(props){
    return (
    <div>
        <div>{formatDate(props.date)}</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    )
}

const comment = {
    date: new Date(),
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Comment date={comment.date} />);

//2023. 5. 10.
//2
//3
//4

04.

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

function Hello(props){
    return (
    <div>
        <div>{props.name}</div>
        <div>{props.text}</div>
        <div>{props.author}</div>
        <div>{props.author1}</div>
    </div>
    )
}

const name = {
    name : "cheonseolhee",
    text : "hello",
    author : {
    name: "너무",
    name1 : "어려워여",
    }
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello name={name.name} text={name.text} author={name.author.name} author1={name.author.name1} />);


//cheonseolhee
//hello
//너무
//어려워여

5. props

props는 읽기 전용이며, 자식 컴포넌트 내에서 수정할 수 없습니다. props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터로, 일반적으로 문자열, 숫자, 객체, 배열 등의 자료형을 가질 수 있습니다. 부모 컴포넌트에서 자식 컴포넌트로 props를 전달할 때는 JSX 문법을 사용하여 전달합니다.

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

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

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