구조분할 할당

구조분해할당이라고도 하더군

import React from "react";
import "../App.css";
import SubBottom from "./SubBottom";

// 번호를 증가시키는 버튼!!
const bottom = (props) => {
  // 구조 분할 할당
  // props 가 가진 모든 키값이 알아서 바인딩이 됨
  // const { 키, 키, 키, increase } = props;
	// 아니면 아예 받을 때 (받을 키 값들) 해주면 됨 (props 들어오는 자리에)
	// 넘길게 많으면? 오브젝트로 넘기겠지,,
  const { increase } = props;

  return (
    <div className="sub-container">
      <h1>Bottom</h1>
      { <button onClick={increase}>증가</button> }
    </div>
  );
};

export default bottom;

실습

Sub-top, bottom 을 만들어서 props 전달하기

App.js

function App() {
  const [number, setNumber] = useState(1);

  return (
    <div className="container">
      <h1>최상단 화면</h1>
      <Top number={number} />
      <Bottom increase={() => setNumber(number + 1)} />
    </div>
  );
}

Top.js

const Top = (props) => {

  return (
    <div className="sub-container">
      <h1>Top</h1>
      <SubTop number={props.number} />
    </div>
  );
};

그냥 (props) 만 해주면 될거라고 생각했는데 아니었다

해당 컴포넌트에 값을 전달해주겠다고 명시하지 않았지...

return (
    <div className="sub-container">
      <h1>Top</h1>
      <SubTop />
    </div>
  );

그냥 일케 하고