[React] props.children

props는 부모(App.js)가 자식(Secnond.js)에게 전달해주는 값, 자식 컴포넌트에서 쓰이는 파라미터이다.

App.js

import logo from "./logo.svg";
import "./App.css";
import Template from "./components/Template";
import TodoList from "./components/TodoList";

function App() {
  return (
    <Template>
      <TodoList />
    </Template>
  );
}

export default App;

• 컴포넌트 태그(Template) 사이의 컴포넌트(TodoList)의 값을 조회하고 싶을 때 props.children을 사용한다.

• children은 A 컴포넌트 사이에 B 컴포넌트가 있을 때, A 컴포넌트에서 B 컴포넌트 내용을 보여주려고 사용하는 props이다. 어떤 데이터가 들어올지 명확하지 않을 때 주로 사용된다.

• A 컴포넌트 사이의 B는 text올 수도 image가 될 수도 , 다른 컴포넌트가 올 수도 있다는 점

Template.js

import "./Template.css";

const Template = ({ children }) => {
  return (
    <div>
      <div>오늘의 할 일</div>
      <div>{children}</div>
    </div>
  );
};

export default Template;

• props는 javascript 객체 형태로 전달되므로 자바스크립트의 Destructing 문법이 적용된다.
  중괄호({})로 감싼 이유는 html 태그에서 자바스크립트를 사용하기 위함이다.

참고)
React 문서 Passing Props to a Component
uijoe - 리액트 프랍스 children은 언제 사용하는가?