state 공유

_mak_______·2022년 12월 1일
0

React Studybook

목록 보기
6/11

종종 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 필요가 있다.
이럴 때는 가장 가까운 공통 상위 컴포넌트로 state를 끌어올리는 것이 좋다.

React 애플리케이션 안에서 변경이 일어나는 데이터에 대해서는 “진리의 원천(source of truth)“을 하나만 두어야 한다. 보통의 경우, 1) state는 렌더링에 그 값을 필요로 하는 컴포넌트에 먼저 추가된다. 그러고 나서 2) 다른 컴포넌트도 역시 그 값이 필요하게 되면 그 값을 그들의 가장 가까운 공통 조상으로 끌어올리면 된다.

다른 컴포넌트 간에 존재하는 state를 동기화시키려고 노력하는 대신 하향식 데이터 흐름에 기대는 걸 추천한다.

다른 컴포넌트로 state 공유

✔ state 공유는 props로 이루어진다.
✔ 상위 > 하위 혹은 하위 > 상위 순서는 상관 없다. 무조건 상위부터 시작한다. (하향식 데이터 흐름)

Example

상위 컴포넌트

import { useState } from "react";
import ChildInput from "./ChildInput";

function ShareValue(){
  const [value, setValue] = useState("First Value");

  const handleChangeValue = (childStateValue) => {
    setValue(childStateValue);
  }

  return (
    <div>
      <ChildInput value={value} onChangeValue={handleChangeValue} />
      <p>ChildInput 의 value: {value}</p>
    </div>
  );
}

하위 컴포넌트

function ChildInput(props){
  const handleChange = (event) => {
    props.onChangeValue(event.target.value);
    // props.onChangeValue === 상위 컴포넌트의 handleChangeValue
  }
  return (
    <div>
      <input type="text" value={props.value} onChange={handleChange} />
    </div>
  );
}

결과

위 예제를 보면 input에 "First Value"를 표시하는 데에 아래의 순서를 따르고 있다.

  1. 상위 컴포넌트에서 state 최초 선언.
    const [value, setValue] = useState("First Value");

  2. 하위 컴포넌트에서 상위 컴포넌트의 state를 props로 받아와
    < ChildInput value={value} onChangeValue={handleChangeValue} />

  3. 하위 컴포넌트 내부에서 props로 받아온 state를 사용하여
    < input type="text" value={props.value} onChange={handleChange} />

  4. 하위 컴포넌트의 input에 "First Value"를 표시.

그리고 value의 state를 변경하는 데에는 아래의 순서를 따르고 있다.

  1. 하위 컴포넌트에서 상위 컴포넌트의 함수를 props로 받아와
    < ChildInput value={value} onChangeValue={handleChangeValue} />

  2. 하위 컴포넌트 내부에서 props로 받아온 함수를 사용하여 input의 value를 넘기고
    const handleChange = (event) => { props.onChangeValue(event.target.value); }

  3. 상위 컴포넌트의 value에 대입
    const handleChangeValue = (childStateValue) => { setValue(childStateValue); }

참고 https://ko.reactjs.org/docs/lifting-state-up.html

0개의 댓글