이 글에서는 다른 브라우저 탭에서도 전 세계적으로 React의 구성 요소 간에 데이터를 전송하는 방법을 살펴보겠습니다.

이야기

사용자와 같은 항목 목록이 있다고 상상해 보세요.

각 사용자는 수정을 위해 모달 창에서 열 수 있습니다.

백엔드에 대한 구독이 없습니다. 즉, 사용자가 변경되면 사용자 목록이 백엔드와 자동으로 동기화되지 않습니다.

따라서 사용자 프로필이 업데이트되면 모달 창 아래(웹 사이트의 다른 모든 탭에서도) 사용자 목록을 자동으로 새로 고치기를 원합니다.

관련되지 않은 구성 요소와 탭의 데이터를 동기화하려면 어떻게 해야 합니까?

해결책

모달 창과 사용자 목록은 이벤트와 데이터를 교환할 수 있어야 합니다.

따라서 모달 창에서 작업이 수행되면 이러한 종류의 작업(예: 사용자 목록)을 기다리는 모든 구성 요소에 이벤트가 전송되어야 합니다. 예를 들어 다음과 같이 이 이벤트에 반응할 수 있습니다. 데이터를 동기화하는 중입니다.

작은 패키지 use-app-events:
를 사용하여 "UserList"와 "UserProfileModal" 구성 요소 간의 통신을 설정해 보겠습니다.

const UserProfileModal = () => {
  // retrieve a user ID from URL, for example
  const { userId } = useParams();

  // 1. Create an instance of useAppEvents
  const { notifyEventListeners } = useAppEvents();

  const submitUpdate = async () => {
    // send a request to BE here, await the response...

    // 2. Send an event containing the updated user ID to
    // all other components that are listening for it
    notifyEventListeners('user-update', userId);
  };

  return Save changes;
};

? 모달 창

? 사용자 목록

const UserList = () => {
  const [users, setUsers] = useState([]);

  // 1. Create an instance of useAppEvents
  const { listenForEvents } = useAppEvents();

  // 2. Listen and wait for the 'user-update' event to happen in the app
  listenForEvents('user-update', (userId) => {
    // 3. React to the occurred event by loading the refreshed
    // list of users from BE here...
  });

  return users.map((user) => (
    // render users here...
  ));
};

use-app-events는 종속성과 위험이 없는 작은 오픈 소스 패키지이며 적극적으로 유지 관리되고 안전하게 사용할 수 있습니다.

이 시점에서 UserProfileModal의 사용자 프로필 업데이트는 UserList와 같은 모든 리스너에게 자동으로 알리고 UserList의 사용자 목록 새로 고침을 트리거하여 더 나은 UX를 제공합니다.

UserList와 UserProfileModal이 구성 요소 트리의 어디에 배치되는지는 중요하지 않습니다. 다른 브라우저 탭에서도.

결론

구성요소 간 데이터 교환을 위해 글로벌 통신을 손쉽게 설정해야 하는 경우 use-app-events 패키지를 사용하세요.

사용하기 쉬운 API, 광범위한 문서 및 엄격한 입력 기능을 제공하여 최고의 개발자 경험을 보장합니다.