issue

• close [FE] EventLoader하위로 EditAccountPage를 옮겨 데이터를 유지하기 위한 로직을 제거 #876

구현 목적

useAccount를 다른 컴포넌트에서도 사용할 수 있도록 리펙터링 해야했는데, 이 안에서 location.state를 사용하고 있었습니다.

이 값은 EditAccountPage(useAccount를 사용하고 있음)에 url을 입력해 직접 접근했을 때 EventLoader에서 받아오는 데이터에 접근하지 못해 오류가 발생하기 때문에 사용되었습니다.

EventLoader에서 받아오는 정보를 EditAccountPage에서 사용해야한다면, 해당 페이지를 EventLoader 하위로 옮겨 EventLoader 호출이 선행 되어야 EditAccountPage를 렌더링할 수 있도록 바꾸는 것이 추가적인 로직을 작성하는 것보다 직관적입니다.

구현 사항

path='/evnet'의 router 관계 변경

path='/event'에는 이벤트의 정보(계좌, 행사 명 등)를 호출해 Provider로 데이터를 하위 트리에 뿌리는 EventLoader컴포넌트가 있습니다. 그리고 이 컴포넌트에서 뿌리는 데이터를 EditAccountPage에서도 사용해야하므로 다음과 같이 router 관계를 변경하였습니다.

(가독성을 위해 tab을 여러번 침)

Outlet 중첩으로 outletContext를 유지하는 것보다 context를 사용하는 것이 유지보수에 좋음

이렇게 수정하고 나면 EventLoader(빨간색)와 AdminPage(노란색)의 depth가 2가 되는데요. 이 경우 outletContext로 데이터를 전달해주는 것보단 그냥 context를 이용하는 게 데이터 흐름 이해 코스트를 줄일 수 있으며 유지보수에도 좋을 것이라고 생각되었습니다.

그래서 데이터를 호출하는 EventLoader에서 Provider를 사용해 데이터를 뿌리도록 구현하였습니다.

const EventLoader = () => {
  const eventData = useEventLoader();

  return (
    <>
      <EventDataProvider {...eventData}>
        <Outlet />
      </EventDataProvider>
    </>
  );
};

결과

• EventLoader에서 호출하고 있던 데이터를 바로 직속의 EventPageLayout에서 중복 호출하는 부분 해결(캐싱되긴 하지만)
• useAccount에서 location.state를 제거할 수 있어 다양한 상황에서 사용할 수 있게 됨