더 복잡해지는 경우 second child 생기는 경우

• 주석 보기
  

전체 코드

import "./styles.css";
import { useState } from "react";
const Parent = () => {
  const [count, setCount] = useState(0);
  // 클릭 횟수를 기록하는 상태를 만든다
  // 처음엔 아무도 클릭안했을테니 0으로 초기값을 설정한다.
  // 그리고 클릭시에 count 상태를 업데이트한다.
  // 어떤걸 활용해서 업데이트할 수 있을까요?

  return (
    <div>
      <button
        onClick={() => {
          setCount(count + 1);
          // 직접 할당하는 방식이 아니라 useState 훅을 통해
          // 얻은 setFunction을 이용해서 상태를 바꿔야함
        }}
      >
        Click!
      </button>
      <Child count={count} />
    </div>
  );
};

const Child = ({ count }) => {
  console.log({ count });
  return (
    <div>
      <h1>{count}회만큼 클릭하셨습니다.</h1>
      <SecondChild text={`${count}회만큼 클릭하셨습니다.`} />
    </div>
  );
};

const SecondChild = (props) => {
  return <h2>{props.text}</h2>;
};

export default function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}