props

 

 

부모 컴포넌트에서 자식 컴포넌트로 정보 전달하기

import React from 'react'

//props를 통해 부모 -> 자식 데이터가 전달됐다.
function Son(props) {
  console.log('props', props.motherName);
  return <div>나는 {props.motherName}의 아들</div>
}

// 부모 -> 자식 정보를 전달했다
function Mother() {
  const name = '흥부인';
  return <Son motherName ={name}/>
}

function GrandFather() {
  return <Mother />
}

function App() {
  return <GrandFather />
}

export default App

 

 

할아버지의 이름을 손자에게 전달하기

import React from 'react'

//props를 통해 부모 -> 자식 데이터가 전달됐다.
function Son(props) {
  console.log('props', props.gfName);
  return <div>나는 {props.gfName}의 손자</div>
}

// 부모 -> 자식 정보를 전달했다
function Mother(props) {
  // console.log('props',props.grandFatherName);
  const gfName = props.grandFatherName;
  const name = '흥부인';
  return <Son gfName ={gfName}/>
}

function GrandFather() {
  const name = '김진태';
  return <Mother grandFatherName ={name}/>
}

function App() {
  return <GrandFather />
}

export default App

 

 

---

 

 

Layout.js

import React from 'react'

function Layout(props) {
  return (
    <>
    <header
        style={{
            magin: '10px',
            border: '1px solid red'
        }}>
        항상 출력되는 머릿글입니다
    </header>
    {props.children}
    </>
    
  );
}

export default Layout;

 

 

App.js

import React from 'react'
import Layout from 'Layout';


function App() {
  return (
  <Layout>
    <div>App 컴포넌트에서 보낸 값입니다</div>
  </Layout>
  );
}

export default App