훅 사이에 데이터 공유하기

 

훅의 각 호출은 상태와 동작이 독립적이며 서로 간섭하지 않는다.

그렇다면 훅 사이에서 데이터를 공유하려면 어떻게 해야 할까?

 

훅 사이에서 데이터를 공유 하는 방법은 몇가지가 있는데 주로 다음과 같은 방식이 있다.

• 상태(state)를 공유하는 방식 : 동일한 상태를 여러 컴포넌트에서 사용할 수 있도록 설정(예 : Context API, Redux 등)
• 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달 : props를 통해 부모에서 자식으로 전달.

이를 바탕으로 상태공유와 전역 상태 관리에 대해서 알아보자.

 

1. 상위 컴포넌트에서 하위 컴포넌트로 상태 전달(Props 사용)

React에서 가장 기본적인 데이터 공유 방법은 부모 컴포넌트가 상태(state)를 관리하고, 이를 props로 자식 컴포넌트에 전달하는 것이다.

 

예시 : useState와 props 사용

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <ChildComponent count={count} setCount={setCount} />
    </div>
  );
}

function ChildComponent({ count, setCount }) {
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Count from parent: {count}</p>
    </div>
  );
}

export default ParentComponent;

 

이 방법은 상위 컴포넌트에서 상태를 관리하고, 자식 컴포넌트로 전달하여 데이터를 공유하는 방식이다.

 

 

2. 컨텍스트(Context) 사용하기 (전역 상태 공유)

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 외에, 여러 컴포넌트에서 데이터를 공유 하려면 Context Api를 사용할 수 있다. 이 방법은 상태가 여러 컴포넌트에 걸쳐 있어야 할 때 유용하다.

 

예시 : Context API로 데이터 공유

import React, { useState, createContext, useContext } from 'react';

// Context 생성
const CountContext = createContext();

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

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <ChildComponent />
      <AnotherChildComponent />
    </CountContext.Provider>
  );
}

function ChildComponent() {
  const { count, setCount } = useContext(CountContext);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Count from context: {count}</p>
    </div>
  );
}

function AnotherChildComponent() {
  const { count } = useContext(CountContext);

  return <p>Another child also has count: {count}</p>;
}

export default ParentComponent;

 

위 예시에서 CountContext를 사용하여 부모 컴포넌트의 상태를 하위 컴포넌트들이 공유하고 있다.

useContext 훅을 사용해서 어디서든 해당 상태를 사용할 수 있다.

 

 

3. 커스텀 훅을 사용한 데이터 공유

커스텀 훅을 이용해서 여러 컴포넌트에서 공통 로직을 추출하고 데이터를 공유할 수 있다.

이렇게 하면 상태 관리 로직을 하나의 훅으로 중앙화 하여 여러 컴포넌트에서 재사용할 수 있다.

 

예시

import { useState } from 'react';

// 커스텀 훅
function useCounter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return { count, increment, decrement };
}

function ComponentA() {
  const { count, increment } = useCounter();
  return (
    <div>
      <h2>Component A Count: {count}</h2>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

function ComponentB() {
  const { count } = useCounter();
  return <h2>Component B Count: {count}</h2>;
}

function App() {
  return (
    <div>
      <ComponentA />
      <ComponentB />
    </div>
  );
}

export default App;

 

위 예시에서 useCounter커스텀 훅을 사용해서 상태와 로직을 두 컴포넌트에서 공유할 수 있다.

 

 

 

4. 전역상태 관리 라이브러리 사용(Redux, Zustand등)

애플리케이션이 커지고, 여러 컴포넌트에서 데이터를 공유하는 범위가 넓어질 경우에는 전역 상태 관리 라이브러리를 사용하는 것도 좋은 방법이다.

대표적으로는 Redux나 Zustand와 같은 상태 관리 라이브러리를 사용할 수 있다.

 

Redux를 사용하면 전역적으로 상태를 관리하고, 여러 컴포넌트에서 그 상태를 공유할 수 있다.

Redux의 설정 및 사용법은 좀 복잡하지만 앱 규모가 커질 수록 유용하다.