[React] React 기초 (1)

 

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);