2. Props 전달하기

---

Props

 

각 컴포넌트들은 props를 통해 소통합니다.

 

 

 

 

아래에서 이름에 해당하는 부분을 ChatBox에서 결정해준다고 하면,

 

함수의 소괄호(parenthesis) 안에 props를 정의하고

마크업에서는 중괄호(brace)로 해당 이름을 감싸서 사용합니다.

export default function ChatHeader({ name }: { name: string }) {
    return (
        <div
            style={{
                ...
            }}
        >
            <span>Chat with {name}</span>
        </div>
    );
}

 

그러면 ChatBox 입장에서 아래처럼 어트리뷰트로 값을 줄 수 있습니다.

import ChatHeader from "./ChatHeader";

export default function ChatBox() {
    return (
        <div className="chat-layout">
            <div className="chat-box">
                <ChatHeader name="Cherry" />
            </div>
        </div>
    );
}

 

 

 

props는 기본값을 가질 수 있으며, 만일 어트리뷰트를 작성하지 않으면 기본값을 사용합니다.

export default function ChatHeader({ name = "Cherry" }: { name?: string }) {
    return ...
}

export default function ChatBox() {
    return (
        <div className="chat-layout">
            <div className="chat-box">
                <ChatHeader /> {/* set default value to name attribute */}
            </div>
        </div>
    );
}

 

 

 

 

 

---

Children

 

이제 메시지를 보여줄 창이 필요해졌습니다.

간단히 생각해보면 ChatScreen 아래에 메시지들을 보여주면 되겠네요.

 

이때 Message들을 ChatScreen의 Children으로 만들어서 전달할 수 있습니다.

export default function ChatMessage() {
    return (
        <div
            style={{
                padding: "10px",
            }}
        >
            hello message!
        </div>
    );
}

import { ReactNode } from "react";

export default function ChatScreen({ children }: { children: ReactNode }) {
    return (
        <div
            style={{
                height: "270px",
            }}
        >
            {children}
        </div>
    );
}

import ChatHeader from "./ChatHeader";
import ChatMessage from "./ChatMessage";
import ChatScreen from "./ChatScreen";

export default function ChatBox() {
    return (
        <div className="chat-layout">
            <div className="chat-box">
                <ChatHeader name="Cherry" />
                <ChatScreen>
                    <ChatMessage />
                    <ChatMessage />
                </ChatScreen>
            </div>
        </div>
    );
}

 

 

 

그리고 당연히 ChatMessage에게도 props를 전달할 수 있습니다.

메시지를 ChatBox에서 만든다고 하면,

export default function ChatMessage({ message }: { message: string }) {
    return (
        <div ...>
            {message}
        </div>
    );
}

import ChatHeader from "./ChatHeader";
import ChatMessage from "./ChatMessage";
import ChatScreen from "./ChatScreen";

export default function ChatBox() {
    return (
        <div className="chat-layout">
            <div className="chat-box">
                <ChatHeader name="Cherry" />
                <ChatScreen>
                    <ChatMessage message="first message!" />
                    <ChatMessage message="second message~" />
                </ChatScreen>
            </div>
        </div>
    );
}

 

 

 

 

 

 

 

---

Reference

 

Passing Props to a Component – React