props

📌  react에서 props란?

부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터를 말한다. 즉 컴포넌트 간의 정보 교류 방법이라 할 수 있다.

* props는 부모->자식방향 아래 방향으로만 작용한다!

 

props의 사용 예시

function App() {
  return <Parents />
}

function Parents() {
  const lastname = "김";
  return <Child lastname={name} />
}

function Child(props) {
  console.log(props) // 객체형태로 받아진걸 확인할 수 있다.
  return <div>연결 성공</div>
}

 

props란 부모 컴포넌트가 자식에게 넘겨준 데이터의 묶음이라고 할수있다 ..!

 

📌  props Children

props.children은 주로 자식 컴포넌트 또는 html 엘리먼트가 어떻게 구성되어 있는지 모르는데, 화면에 표시해야 하는 경우 사용합니다.

밑에 예시에서 처럼 사용하게 되면 Layout 컴포넌트가 쓰이는 모든 곳에서 <Layout>...</Layout> 안에 있는 정보를 받아서 가져올 수 있게 되는 것입니다..!

import Layout from "./components/Layout";

function App() {
  return (
    <Layout>
      <div>여기는 App의 컨텐츠가 들어갑니다.</div>
    </Layout>
  );