Fiat Lux

React 컴포넌트 (함수형)

함수형 컴포넌트는 JavaScript 함수로 작성되며, React 컴포넌트를 반환합니다.
함수형 컴포넌트는 단순하고 간결하며, 최신 버전의 React에서는 훅(Hook)을 사용하여
상태 및 다른 React 기능을 활용할 수 있습니다.

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

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

ReactDom.render(element, document.getElementById('root'));

export default Hello

두 개의 함수형 컴포넌트 사용

Welcome과 App이라는 두 개의 컴포넌트를 사용하여 화면에 여러 개의 welcome과 이름을 렌더링하는 간단한 React를 구현한 것입니다.
각각의 Welcome 컴포넌트는 name 속성을 받아와서 해당 이름을 포함한 welcome을 출력합니다.
App 컴포넌트에서는 Welcome 컴포넌트를 여러 번 사용하여 세 가지 다른 이름에 대한 welcome을 출력합니다.

import React from 'react';
import ReactDom from 'react-dom/client';

function Welcome(props) {                           //Welcome이라는 함수형 컴포넌트는 props를 매개변수로 받아와서 이름(name)을 사용하여 welcome을 반환합니다.
return <h1>Hello, {props.name}</h1>
}

function App (){                                    //App이라는 함수형 컴포넌트는 Welcome 컴포넌트를 세 번 사용하여 세 가지 다른 이름을 가진 welcome을 반환합니다.
return (
    <div>
    <Welcome name = "fita lux" />
    <Welcome name = "Fita Lux" />
    <Welcome name = "FITA LUX" />
    </div>
)
}

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

props (속성)

props(속성)는 React 컴포넌트로 전달되는 읽기 전용 데이터이며,
부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용됩니다.
props는 컴포넌트 내부에서 변경할 수 없으며, 컴포넌트의 상태(state)와 다릅니다.

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, 부모 컴포넌트에서 전달된 데이터는 자식 컴포넌트의 props 객체로 접근할 수 있습니다.
props 객체는 컴포넌트 함수나 클래스의 인자로 전달되며, 키-값 쌍의 형태로 데이터를 포함합니다.
자식 컴포넌트에서는 props 객체를 사용하여 전달받은 속성에 접근할 수 있습니다.

props는 컴포넌트 간 데이터 흐름을 가능하게 하며, 컴포넌트의 재사용성을 높이는 데 도움을 줍니다.
부모 컴포넌트에서 자식 컴포넌트로 다양한 종류의 데이터를 전달할 수 있으며,
자식 컴포넌트는 props를 활용하여 전달받은 데이터를 화면에 렌더링하거나 다른 작업에 활용할 수 있습니다.

props는 함수의 매개변수 개념으로 생각하면 이해하는 데 도움이 됩니다.

import React from 'react';
import ReactDom from 'react-dom/client';

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

const element = <Hello name = "fita lux" />;

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

React

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

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

React 설치

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

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.입니다