React props로 데이터 전달하기

1. 부모 컴포넌트

부모컴포넌트에 props="value" 를 입력한다.

(아래에 TodoList를 보면 todo="TODO" 라고 쓰여진 부분)

function App() {
  return (
    <div className="App">
      <div>TODO LIST</div>
      <TodoList todo="TODO" />
    </div>
  );
}

 

2. 자식 컴포넌트

props를 파라미터로 넘겨주고, {props.XXX}로 바인딩 해서 사용한다.

XXX 부분에는 부모컴포넌트에서 옮겨준 이름을 사용하면 된다.

{props.todo} 부분!

import React from "react";

const TodoList = (props) => {
  return (
    <div>
      <label>
        <input type="checkbox"></input>
      </label>
      <p>{props.todo}</p>
    </div>
  );
};

export default TodoList;