React 컴포넌트, props 란?

React 컴포넌트, props 란?

React는 가상 DOM(Virtual DOM)을 사용하여 UI의 효율성과 성능을 향상시키며, 컴포넌트의 상태(state) 및 속성(props)을 관리할 수 있습니다. 또한 React는 JSX라는 문법을 사용하여 JavaScript 코드 내에 XML과 유사한 구문을 삽입할 수 있습니다.

 

 

 

컴포넌트

React 컴포넌트는 React에서 UI를 만들기 위해 사용되는 독립적인 모듈입니다.

각각의 컴포넌트는 자체적인 상태(state)와 속성(props)을 가질 수 있으며, UI를 나타내는 JSX 코드로 작성됩니다.

 

React 애플리케이션은 대개 하나 이상의 컴포넌트로 구성되며, 각각의 컴포넌트는 해당 컴포넌트의 UI와 관련된 로직을 포함합니다. 이러한 컴포넌트는 재사용성과 유지보수성이 뛰어나며, 컴포넌트 간의 계층 구조를 이용하여 복잡한 UI를 만들어낼 수 있습니다.

 

 

 

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

 

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

function Hello(){
    return <h1>Hello, KDH</h1>
}
const element = <Hello />

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

export default Hello    

//Hello, KDH

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 = "KDH" />
      <Welcome name = "kDH!!!" />
      <Welcome name = " Welcome^^" />
    </div>
  )
}

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

//Hello, KDH
//Hello, kDH!!!
//Hello, Welcome^^

Welcome 컴포넌트를 정의하고, 이를 사용하여 App 컴포넌트를 구성하고 있습니다. ReactDOM.createRoot()를 사용하여 root 요소를 렌더링할 수 있도록 설정하고, root.render() 메서드를 사용하여 App 컴포넌트를 렌더링합니다.

 

App 컴포넌트는 Welcome 컴포넌트를 세 번 사용하며, 각각의 Welcome 컴포넌트는 name 속성(props)을 통해 다른 값을 전달받고 있습니다. 이를 통해 세 개의 다른 Hello 메시지를 렌더링합니다.

 

 

 

 

 

 

props

 

props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위한 메커니즘입니다.

props는 컴포넌트 내에서 변경할 수 없는 읽기 전용 데이터로서, 컴포넌트 내에서 함수나 변수 등으로 참조될 수 있습니다.

 

부모 컴포넌트에서 자식 컴포넌트로 props를 전달할 때는, JSX를 사용하여 전달하려는 데이터를 해당 컴포넌트에 속성(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 = "KDH!!!" />

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);
    
//Hello, KDH!!!

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

function Hello(props){
    return (
    <div>
        <div>{props.title}</div>
        <div>{props.talk}</div>
        <div>{props.who}</div>
        <div>{props.link}</div>
    </div>
    )
}

const name = {
    name : "KDH!",
    text : "hi",
    author : {
    name : "babo",
    ulr : "naver.com"
    }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello title={name.name} talk={name.text} who={name.author.name} link={name.author.ulr}/>);

//KDH!
//hi
//babo
//naver.com

Hello 컴포넌트를 정의하고, 이를 사용하여 props로 전달된 데이터를 렌더링하고 있습니다.

ReactDOM.createRoot()를 사용하여 root 요소를 렌더링할 수 있도록 설정하고, root.render() 메서드를 사용하여 Hello 컴포넌트를 렌더링합니다.

 

Hello 컴포넌트는 props를 통해 전달된 데이터를 사용하여 4개의 div 요소를 렌더링하고 있습니다.

해당 코드에서는 name 객체를 사용하여 props로 전달된 title, talk, who, link 값을 지정하고 있습니다.