[React] 🎣State 상태 끌어올리기

React에서 하나의 컴포넌트는 한 가지 일을 하는게 이상적인 원칙이다.
또한 상태가 많아질수록 애플리케이션은 복잡해지기 때문에 상태는 최소화하는 것이 좋다.

▷ State 끌어올리기

🎣 State 상태 끌어올리기란?

만일 하나의 상태를 기반으로 두 컴포넌트가 영향을 받는다면,
이 두 자식(두 컴포넌트)의 공통 부모 컴포넌트에 상태를 위치시켜야 한다.

❗️참고) 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터가 state로부터 왔는지, 하드코딩으로 입력된 내용인지 알지 못한다.

<FormattedDate date={this.state.date} />
  
-----
/* FormattedDate */
function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

🎣 사용 예시

상위 컴포넌트의 상태 변경 함수를 하위 컴포넌트로 전달하면,
이 함수를 하위 컴포넌트가 실행한다.

import React, { useState } from "react";

export default function ParentComponent() {
  const [value, setValue] = useState("날 바꿔줘!");

  const handleChangeValue = () => {
    // 값 변경
    setValue("완전히 달라진 값");
  };

  return (
    <div>
      <div>값은 {value} 입니다</div>
	  // 사용자 정의 컴포넌트의 props.handleButtonClick에
      // handleChangeValue함수를 넣어줌.
      <ChildComponent handleButtonClick={handleChangeValue}/>
    </div>
  );
}

function ChildComponent({ handleButtonClick }) {
  const handleClick = () => {
    // 함수 호출
    handleButtonClick()
  };

  return <button onClick={handleClick}>값 변경</button>;
} // 버튼을 클릭하면 "날 바꿔줘!" => "완전히 달라진 값"으로 변경된다.


---------------------------
  
function ParentComponent() {
  const [value, setValue] = useState("날 바꿔줘!");

  const handleChangeValue = (newValue) => {
    // 변경 값으로 함수 인자를 받음
    setValue(newValue);
  };

  // ...생략...
}

function ChildComponent({ handleButtonClick }) {
  const handleClick = () => {
    // 인자 값을 넣은 상태 호출
    handleButtonClick('자식이 원하는 값을 넘겨줄게')
  }

  return (
    <button onClick={handleClick}>값 변경</button>
  ) // 버튼을 클릭하면 "날 바꿔줘!" => "자식이 원하는 값을 넘겨줄게"로 변경된다.
}

❓ State가 아닌 경우?
부모로부터 props를 통해 전달되는 경우,
시간이 지나도 변하지 않는 경우(정적일 때),
컴포넌트 안의 다른 state나 props를 가지고
계산 가능한 경우에는 State가 아니다. (ex. 필터링된 목록은 state가 아니다.)

📚 더 많은 이해를 하고 싶다면?
👉 (공식문서)State와 생명주기 중 데이터는 아래로 흐른다.
👉 (공식문서)React로 생각하기