[React] State 끌어올리기

사실 이게 State 끌어올리기가 맞는지 모르는데 일단 작성함. 쓸일이 많음. 상황은 부모컴포넌트가 프로덕리스트고, 자식컴포넌트가 넘버링버튼인 상황임. 자식에서 눌린 넘버링버튼의 인덱스를 부모가 알게하고싶음.

// 부모 컴포넌트
export default function Users() {
  const [users, setUsers] = useState([]);

  const updateOffset = (buttonIndex) => {
    console.log(buttonIndex);
  }

  return (
    <div className="photos">
      <h1>Mini Project - Pagination</h1>
      <Buttons updateOffset={updateOffset} />
      <CardList users={users} />
    </div>
  );
}

// 자식 컴포넌트
export default function Buttons({updateOffset}) {

  return (
    <div className="pageBtn">
      <button onClick={()=>updateOffset(0)}>1</button>
      <button onClick={()=>updateOffset(1)}>2</button>
      <button onClick={()=>updateOffset(2)}>3</button>
      <button onClick={()=>updateOffset(3)}>4</button>
      <button onClick={()=>updateOffset(4)}>5</button>
    </div>
  );
}

1. 부모에서 updateOffset함수를 자식에게 props로 넘겨줌. 필요할 경우 매개변수를 지정함.
2. 자식에서 props로 받은 updateOffset를 이벤트에 걸어 실행될 수 있도록 함. 필요할 경우 인자를 넘겨줌.
3. 이벤트가 발생하게 되면 이벤트의 값을 부모가 알게됨. 이를 state로 지정하면 State끌어올리기임