State 끌어올리기 (State Lifting)

리액트의 데이터 흐름은 단방향으로 부모에서 자식 방향으로 흐른다
이러한 방식은 코드수정이 편하다는 장점을 가지고 있다

여기서 형제컴포넌트끼리 State를 수정하고 받을려면 어떻게 해야할까?
바로 useState를 부모컴포넌트에서 사용후 각각 필요한 State, setState를 props로 넘겨서 사용하는거다
이 방식을 State 끌어올리기 (State Lifting) 이라고 한다

import Presentation1 from "../presentation"
import Presentation2 from "../presentation"

import { useState } from "react"

export default function StateLifting() {
  const [count, setCount] = useState()

  return(
    <div>
      <Presentation1 setCount={setCount}/>
      <Presentation2 count={count}/>
    </div>
  )
}

위를 보면 부모컴포넌트가 자식컴포넌트1,2를 import해와서
자식컴포넌트1에게는 setCount를 전달
자식컴포넌트2에게는 count전달하고 있다

부모컴포넌트에서 useState를 선언 -> 자식컴포넌트1에게 setCount를 전달 -> 값 변경
-> 부모컴포넌트의 count값이 변경됨 -> 자식컴포넌트2에게 변경된 count를 전달

위와같은 순서로 사용이 된다