• 목차

개요

• 컴포넌트들이 각각 다른 데이터를 매개변수로 받아서 개별 처리를 할 수 있게 해보자.

Todo.js

function Todo(props) {
  return (
    <div className="card">
      <h2>{props.text}</h2>
      <div className="actions">
        <button className="btn">Delete</button>
      </div>
    </div>
  )
}

export default Todo

• 모든 함수 컴포넌트가 매개변수를 받을 수 있는데 이 매개변수를 props 라고 한다.
• props 는 객체이며, key-value 쌍으로 사용된다.
• 리액트에 의해 자동으로 함수에 props 가 전달된다.

App.js

import Todo from "./components/Todo"

function App() {
  return (
    <div>
      <h1>My Todos</h1>
      <Todo text="Learn React" />
      <Todo text="Master React" />
      <Todo text="Explore the full React course" />
    </div>
  )
}

export default App

• Todo element 에서 text 속성을 주어 title 을 동적으로 바꿀 수 있게 되었다.