형제끼리 값 다루기

이건 어쩔 수 없음. 부모를 통해서 가야 함.

 

function App() {

  const [count, setCount] = useState(0);
  const handlerCount = (value)=>{
    setCount(count+value);
  }
  return (
    <div className="App">
      <Viewer count={count}></Viewer>
      <Controller handlerCount={handlerCount}></Controller>
    </div>
  );
}

이렇게 하고

 

function Viewer({count}) {
  return (
    <div>
      <div className="inner">
        <h3>현재 카운트</h3>
        <div className='count'>{count}</div>
      </div>
    </div>
  );
}

뷰에서는 저렇게 그냥 그대로 쓰면 되고. 이미 useState() 상태로 들어온 거라 (아마?)

 

function Controller({handlerCount}) {

  return (
    <div className="btns">
      <div className="inner">
        <button onClick={()=>{handlerCount(-1)}}>-1</button>
        <button onClick={()=>{handlerCount(-10)}}>-10</button>
        <button onClick={()=>{handlerCount(-100)}}>-100</button>
        <button onClick={()=>{handlerCount(+100)}}>+100</button>
        <button onClick={()=>{handlerCount(+10)}}>+10</button>
        <button onClick={()=>{handlerCount(+1)}}>+1</button>
      </div>
    </div>
  );
}

저 함수 호출하면 부모꺼 호출함.

부모 입장에서 생각하셈.