본문 바로가기

2024-05-20 props 개념 이해하기

codeConnection 2024. 5. 21.

props 개념은 이해했으나 손에 잘 붙지 않아 연습문제를 풀고자 한다.

  1. Message라는 이름의 컴포넌트를 만들고, text라는 props를 받아서 화면에 출력하세요.
  2. App 컴포넌트에서 Message 컴포넌트를 사용하여 "Hello, World!" 메시지를 출력하세요.
// App.jsx

function App() {
    return (
    <>
        <div>
         <Message text="Hello, Wolrd!"/>
        </div>
    </>
    );
}

// Message.jsx

function Message(props) {
    return (
    <>
    <h1>{props.test}</h1>
    </>
    );
}

댓글