[React] React 입문

 

React

React는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다.

Facebook에서 개발한 React는 컴포넌트 기반 접근 방식을 사용하여 웹 및 모바일 애플리케이션의 UI를 구축하는 데 사용됩니다. React는 가상 DOM(Virtual DOM) 개념을 활용하여 효율적인 UI 업데이트를 달성합니다. 가상 DOM은 실제 DOM과 동기화되어 있지 않고, 변경 사항이 발생한 부분만 업데이트합니다. 이를 통해 React는 빠른 성능과 효율성을 제공하며, 대규모 애플리케이션에서도 잘 작동합니다. React는 컴포넌트라는 재사용 가능한 UI 조각들을 작성하고 조합하여 애플리케이션을 구축하는 방식으로 작동합니다. 각 컴포넌트는 자체적으로 상태(state)를 가질 수 있으며, 상태가 변경되면 컴포넌트는 다시 렌더링됩니다. 이러한 컴포넌트 기반 접근 방식은 코드의 재사용성과 유지 보수성을 높여줍니다.

 

 

React 설치

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

React를 사용하려면 먼저 Node.js를 설치해야 합니다.
Node.js는 JavaScript 런타임 환경으로, React 애플리케이션을 실행하고 개발하는 데 필요합니다.
Node.js를 설치하면 npm(Node Package Manager)도 함께 설치됩니다.
npm은 React를 비롯한 다양한 자바스크립트 패키지를 관리하는 도구입니다.

2. 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.25.199:3000

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

    webpack compiled successfully

 

 

React 기본 개념

1. HELLO, THE WORLD 출력

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

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(HELLO, THE WORLD);

    //HELLO THE WORLD

 

 

2. JSX

JSX는 JavaScript XML의 약어로, React 애플리케이션에서 UI를 작성하기 위해 사용되는 JavaScript의 확장 문법입니다. JSX는 React 컴포넌트의 구조를 선언적이고 가독성 있게 작성할 수 있도록 도와줍니다.

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

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

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

 

3. 객체와 함수 사용

 function helloName() {
    return name.nick;
    }

    const name  = {
    nick : "fita lux"
    }

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

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

 

 

4. 랜더링

    function clock(){
        const element = (
            
                Hello, fitalux
                지금은 {new Date().toLocaleDateString()} 입니다.
            
        );
    
        ReactDOM.render(element, document.getElementById('root'));
    }

    export default clock
    //지금은 23. 05. 08.입니다