React의 컴포넌트는 독립적인 상태를 가질 수 있으며, 때로는 여러 컴포넌트 간에 상태를 공유해야하는 경우가 있습니다. 이를 위해 Custom Hook을 사용하여 간편하고 재사용 가능한 상태 관리 로직을 작성할 수 있습니다.

Custom Hook이란?

Custom Hook은 React 컴포넌트에서 로직을 추상화하고 재사용하기 위한 방법입니다. Custom Hook은 자체 상태를 가질 수 있으며, 다른 컴포넌트에서 사용될 때 상태 및 로직을 공유할 수 있습니다.

예시

다음은 Custom Hook을 사용하여 여러 컴포넌트에서 상태를 공유하는 간단한 예시입니다.

import React, { useState } from 'react';

function useSharedState(initialState) {
  const [state, setState] = useState(initialState);

  const updateState = (newState) => {
    setState(newState);
  };

  return [state, updateState];
}

function ComponentA() {
  const [sharedState, setSharedState] = useSharedState('');

  const handleChange = (event) => {
    setSharedState(event.target.value);
  };

  return (
    <div>
      <input type="text" value={sharedState} onChange={handleChange} />
    </div>
  );
}

function ComponentB() {
  const [sharedState] = useSharedState('');

  return (
    <div>
      <p>Shared State: {sharedState}</p>
    </div>
  );
}

위의 예시에서 useSharedState라는 Custom Hook이 state와 updateState라는 두 가지 값을 반환합니다. 이를 이용하여 ComponentA와 ComponentB에서 상태를 공유할 수 있습니다.

ComponentA에서 handleChange 함수를 통해 setSharedState를 호출하여 상태를 업데이트하면, 해당 변경 사항은 ComponentB에서도 반영됩니다. 이는 동일한 상태를 공유하여 상호작용성을 가진 여러 컴포넌트 간의 상태 공유를 가능하게 합니다.

결론

Custom Hook을 사용하면 여러 컴포넌트 간에 재사용 가능한 상태 공유 로직을 구현할 수 있습니다. 이는 코드의 재사용성과 가독성을 향상시키는 데 도움을 줍니다. Custom Hook을 활용하여 React 애플리케이션의 상태 관리를 간소화하고, 효율적으로 구성할 수 있습니다.

#React #CustomHook