미라클 메모리

App컴포넌트에서의 상태변경 함수를 DiaryEditor에 Props로 전달한다. DiaryEditor는 전달받은 setdata 함수를 통해 변경된 state값을 App컴포넌트에 반영시킨다. 이와같이 자식 컴포넌트를 통해서 변경된 상태값이 부모 컴포넌트로 전달되는 것을 State 끌어올리기 라고 한다

예제

import React, { useState } from "react";
import FirstComponent from "../components/FirstComponent";
import SecondComponent from "../components/SecondComponent";

const Home = () => {
  const [number, setNumber] = useState(0);

  return (
    <div>
      <FirstComponent number={number} setNumber={setNumber} />
      <SecondComponent number={number} />
    </div>
  );
};
export default Home;

Home 컴포넌트는 0이라는 값을 state로 가지고있다. 이때 FirstComponent에 state값과 state 변경 함수를 props로 전달했다.

FirstComponent

import React from "react";

const FirstComponent = ({ setNumber, number }) => {
  return <button onClick={() => setNumber(number + 1)}>버튼입니다</button>;
};
export default FirstComponent;

FirstComponent는 전달받은 props를 사용하여 상태값을 변경한다. button을 클릭할 경우 부모 컴포넌트로 부터 전달받은 State변경 함수를 사용하여 전달받은 상태값을 변경시킨다. 하위컴포넌트에서 상태변경함수 컴포넌트를 사용하면 어떻게 될까?

결과는 동일하게 동작한다. 하위컴포넌트로 인해서 변경된 상태값을 부모가 이어받는 것이다. 그렇게 하위컴포넌트로 인해서 변경된 상태값은 SecondComponent에 전달된다

SecondComponent

import React from "react";

const SecondComponent = ({ number }) => {
  return <h1>{number}</h1>;
};
export default SecondComponent;

FirstComponsnt로 인해서 부모의 상태값이 변경되었다. 부모의 변경된 상태값은 props로 다시 자식 컴포넌트로 전달이된다. 그에 따라서 상태값은 부모가 가지고있지만 FirstComponent에 의해서 상태값이 변경이 된다. 즉, 자식으로부터 변경된 상태값이 끌어올려진다. 끌어 올려진 state값은 다시 SecondCompont에 Props로 전달된다.

이와같이 자식 컴포넌트를 통해서 변경된 상태값이 부모 컴포넌트로 전달되는 것을 State 끌어올리기 라고 한다