hook으로 컴포넌트 일괄 업데이트하기

// Using hooks
import './App.css';

/**
 * 'use'로 시작하는 것 모두 Hook에 속함
 * - useState는 빌트인 Hook. 외부에서 hook 가져올 수도 있음
 * - 하위 버튼에서 업데이트 한 것을 상위에서 전체 컴포넌트로 적용시키는 것을 lifting state up 이라 부름
 */

import { useState } from 'react';

function App() {
  const [sentenceCount, setSentenceCount] = useState(0);

  function handleClick() {
    setSentenceCount(sentenceCount + 1);
  }

  return (
    <div>
      <h1>Sentence counters</h1>
      <MyButton sentenceCount={sentenceCount} onClick={handleClick} />
      <MyButton sentenceCount={sentenceCount} onClick={handleClick} />
    </div>
  );
}

function MyButton({ sentenceCount, onClick }) {
  return <button onClick={onClick}>collected {sentenceCount} sentences</button>;
}

export default App;