props에 컴퍼넌트 사용하기

{} 중괄호를 사용해서 props 값으로 컴포넌트를 넣을 수도 있다.

// ChildComponent.js
import React from 'react';

const ChildComponent = ({ message }) => {
    return <div>{message}</div>;
};

export default ChildComponent;

 

message라는 prop를 받아서 그 값을 화면에 표시한다.

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
    const customMessage = "안녕하세요, 자식 컴포넌트입니다!";

    return (
        <div>
            <h1>부모 컴포넌트</h1>
            <ChildComponent message={customMessage} />
            {/* 또는 직접 컴포넌트를 props로 전달 */}
            <ChildComponent message={<strong>안녕하세요, JSX로 전달된 메시지입니다!</strong>} />
        </div>
    );
};

export default ParentComponent;

 

ChildComponent를 두 번 사용한다.

첫 번째 사용에서 문자열 메시지를 전달하고, 두 번째 사용에서는 JSX요소 (<strong>안녕하...</strong>)를 직접 전달한다.

 

// App.js
import React from 'react';
import ParentComponent from './ParentComponent';

const App = () => {
    return (
        <div>
            <ParentComponent />
        </div>
    );
};

export default App;

 

ParentComponent를 포함하여 애플리케이션을 구성한다.

 

결과화면

<div>
    <h1>부모 컴포넌트</h1>
    <div>안녕하세요, 자식 컴포넌트입니다!</div>
    <div><strong>안녕하세요, JSX로 전달된 메시지입니다!</strong></div>
</div>

 

이 코드를 실행하면 ParentComponent는 두 개의 ChildComponent를 렌더링하며, 각각의 message prop에 따라 다른 내용을 표시한다, 첫 번째는 문자열 메시지, 두 번째는 jsx로 구성된 메시지를 보여준다.

이런 방식으로 props를 사용하여 컴포넌트 간에 데이터를 주고 받을 수 있다.