React 데이터흐름 / state 끌어올리기

 

 

 

React 데이터 흐름

 

부모로부터 자식으로만 데이터가 전달이 가능

데이터를 전달하는 주체는 부모 컴포넌트.  데이터 흐름이 하향식(top-down)임을 의미

유지보수를 좀 더 편리하게 만들 수 있도록 해주는 역할

 

 애플리케이션이 필요로 하는 가장 최소한의 state를 찾고 이를 통해 나머지 모든 것들이 필요에 따라 그때그때 계산되도록 만어야 한다.

1. 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.
2. 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.
3. 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.

EX)

 애플리케이션은 다음과 같은 데이터를 가지고 있을 때

 최소한의 State는 다음과 같다.

 

State 끌어올리기 (Lifting State Up)

 

단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있다.

 

하위 컴포넌트에서 전달받은 데이터를 사용하기위해

 

상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행

 

예시)

import React, { useState } from "react";

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

  const handleChangeValue = () => {
    setValue("보여줄게 완전히 달라진 값");
  };

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent />
    </div>
  );
}

function ChildComponent() {
  const handleClick = () => {
    // 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까?
  };

  return <button onClick={handleClick}>값 변경</button>;
}