컴퍼넌트와 props

컴포넌트

리액트(React)에서 컴포넌트(Component)는 UI(User Interface)를 구성하는 블록 단위입니다. 즉, 화면에 보여지는 모든 요소들을 각각의 컴포넌트로 나누어서 작성합니다.

컴포넌트는 각각의 기능을 수행하며, 다른 컴포넌트와 조합하여 더 큰 컴포넌트를 만들 수 있습니다. 예를 들어, 화면을 구성하는 헤더, 푸터, 내비게이션 바, 리스트 등을 각각의 컴포넌트로 작성하고, 이를 다시 조합하여 전체 페이지를 완성할 수 있습니다.

리액트에서는 컴포넌트를 작성할 때 함수형 컴포넌트(Functional Component)와 클래스형 컴포넌트(Class Component)로 나뉩니다. 함수형 컴포넌트는 간단한 UI를 작성할 때 사용하며, 클래스형 컴포넌트는 상태(State)와 라이프사이클(Lifecycle) 관리를 위해 사용합니다.

컴포넌트는 여러 번 사용될 수 있으므로 재사용성이 높고, 각 컴포넌트는 독립적으로 작동하기 때문에 유지보수와 확장성이 좋습니다. 또한, 컴포넌트의 작성 방법이 모듈화된 구조와 유사하기 때문에 코드의 가독성도 높아집니다. 이러한 이유로 리액트에서는 컴포넌트를 중요한 개념으로 취급합니다.

 

props

리액트(React)에서 Props(Properties)는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다. Props는 자식 컴포넌트에서 읽기만 가능하고, 수정이 불가능하며, 함수형 컴포넌트에서는 props를 매개변수로 받아 사용합니다.

Props는 컴포넌트에 필요한 데이터를 전달하는데 사용됩니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하여, 자식 컴포넌트에서 해당 데이터를 활용해 UI를 렌더링합니다.

Props는 다음과 같은 형태로 사용할 수 있습니다.

function MyComponent(props) {
  return <div>{props.text}</div>;
}

<MyComponent text="Hello, world!" />

위 예제에서는 text라는 Props를 MyComponent에 전달하고 있습니다. MyComponent에서는 전달받은 text Props를 사용하여 "Hello, world!"를 화면에 렌더링합니다.

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 = "hb" />

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

//Hello, hb

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

function Hello(props){
    return (
    <div>
        <div>{props.name}</div>
        <div>{props.n1}</div>
        <div>{props.n2}</div>
        <div>{props.n3}</div>
    </div>
    )
}

const name = {
    name : "hb!",
    text : "hi",
    author : {
     name : "baby",
     com : "naver.com"
    }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello name={name.name} n1={name.text} n2={name.author.name} n3={name.author.com}/>);

//hb!
//hi
//baby
//naver.com