[useState] 리액트 탐험.. useState...

useState로 설정한 data를 공유하려면 부모 컴포넌트로 부터 props로 받아와야 한다.

 

모든 Child 컴포넌트가 같은 count 값을 공유하길 원한다면, count 상태를 Child 컴포넌트가 아닌 Parent 컴포넌트에서 관리해야 한다. 그리고 이 count와 setCount를 Child 컴포넌트에 props로 전달한다.

 

function Parent() {
  const [count, setCount] = useState(0);

  return <Child count={count} setCount={setCount} />;
}

function Child({ count, setCount }) {
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

 

같은 컴포넌트 내에서 button을 만들어 count + 1을 각자 하면, 개별의 count로 인식된다.