React - Components 사이에서 데이터 공유하기 & lifting State Up

React - Components 사이에서 데이터 공유하기 & lifting State Up

React에서 컴포넌트들 사이에서 데이터를 공유하는 방법에 대해 알아보자.

 

먼저 컴포넌트 간의 데이터를 공유하지 않는 예제를 보자.

import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

위 코드로 만들어진 렌더링 된 화면은 다음과 같다.

2개의 MyButton 컴포넌트가 존재하고, 각 버튼은 count를 갖고 있어서 버튼을 누를 때 자기 자신 컴포넌트의 count만 증가하게 되어 있다.

 

 

반응형

 

 

컴포넌트 사이에서 데이터 공유하기

이전 예제에서 count가 따로 놀았다.

 

이 둘의 데이터를 동시에 같은 값을 갖도록 하고자 할 때

 

이 둘 컴포넌트에서 따로 관리되던 count를,

두 컴포넌트를 담고 있는 상위 컴포넌트로 count를 위로 올려서 관리해야 한다.

 

import { useState } from 'react';

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

 

MyButton에 있던 count state를 상위 컴포넌트인 MyApp에서 state 선언을 하고,

MyApp 컴포넌트에서 하위 컴포넌트인 MyButton에 count state를 전달한다.

전달할 때 MyApp에서 count state의 값을 변경하는 함수도 함께 전달하여서

하위 컴포넌트 MyButton에서 버튼을 클릭을 하면 MyApp의 함수가 실행되어 

MyApp의 count state 값이 증가하게 된다. (count state 값이 변경됨)

 

상위 컴포넌트의 count state값은 두 컴포넌트들에 보내지고 있으므로

두 컴포넌트는 상위 컴포넌트로부터 전달받은 같은 count 값을 re-rendering 하게 되면서

컴포넌트들이 같은 데이터를 공유하게 된다.

 

이것을 'Lifting State Up' 이라고 한다.