1. State 끌어올리기(상향식 컴포넌트 데이터 이동)

React에서 아주아주 중요한 State 끌어올리기를 배워봅시다.(아직 Redux 배우는중이라...)

 

[원리]

 

부모로부터 온, 함수의 포인터를, 자식이 실행시킨다.

 

함수의 실질적인 실행은 부모에서 실행된다.

 

자식은, 값들을 함께 넣고 실행시켜, 부모가 그 값을 받을 수 있다.

 

[단점]

 

무진장 많은 Props Drilling 이 발생 할 수 있다.

 

복잡성은 사실 중요한 일이라서, 이게 가장 큰 단점이 될 수 있다.

 

[코드]

 

     <부모>

 

          function onSaveYearValue(e) {

            setValue(e.target.value);

          }

          console.log(value);

 

         return (

           <div className={styles.maindiv}>

               <ExpenseForm onSaveExpenseData={saveExpenseDataHandler} />

               <ExpenseSelector onSaveYearValue={onSaveYearValue} />

            </div>

           );

      }

      export default NewExpense;

     <자식>

 

          function ExpenseSelector(props) {

            const { onSaveYearValue } = props;

            return (

              <select onChange={(e) => onSaveYearValue(e)}>

                   <option value={"2018"}>2018</option>

                   <option value={"2019"}>2019</option>

                   <option value={"2020"}>2020</option>

                  <option value={"2021"}>2021</option>

                   <option value="2022">2022</option>

              </select>

            );

          }

          export default ExpenseSelector;

이 함수가 자식에서 실행되면, 자식의 값이 들어간 함수가 실행되어, 부모에게 들어간다.

 

[State 끌어올리기를 통해, 한번에 쭉 부모에게 도달해보기]

  useState 를 사용하여 하나씩 상태에 저장하지 말고, 필요한 부분까지 끌어올려보자

 

[부모1] = App.js

 

export default function App() {

 

  const [year, setYear] = useState("");

  function onSaveYearValue(data) {

    setYear(() => data);

  }

 

  return (

    <div className="App">

      <h1> ms</h1>

      <NewExpense  onSaveYearValueToMain={onSaveYearValue} />

      <Expense  fromNewExpense={expensData} />

    </div>

  );

}

 

[자식1]

 

function NewExpense(props) {

  const { onSaveYearValueToMain } = props;

 

  function onSaveYearValue(e) {

    onSaveYearValueToMain(e.target.value);

  }

  return (

    <div className={styles.maindiv}>

      <ExpenseSelector onSaveYearValue={onSaveYearValue} />

    </div>

  );

}

export default NewExpense;

 

[자식2]

function ExpenseSelector(props) {

  const { onSaveYearValue } = props;

  return (

    <select onChange={(e) => onSaveYearValue(e)}>

      <option value={"2018"}>2018</option>

      <option value={"2019"}>2019</option>

      <option value={"2020"}>2020</option>

      <option value={"2021"}>2021</option>

      <option value="2022">2022</option>

    </select>

  );

}

export default ExpenseSelector;

무상태 컴포넌트를 사용해 끝까지 올려, 상태유지 컴포넌트까지 올려준다. 그리고 상태에 저장!

 

하지 않아도 되고, 재평가가 필요한 시점까지 끌어내려, 저장을 해도 되겠다.

 

하지만 전달하려면, State 에 넣어야겠지?