2021/09/24 : 반복되는 요소를 단축하자

페이지가 많아질수록, App.tsx에서 Routing을 하고 있는 숫자로 많아진다.

결과적으로 아래와 같은 아주 긴, 컴포넌트가 만들어지게 된다.

 

<Switch>
          <Route exact path={ROUTE.COMMON.HOME} component={LoadableHome} />
          <Route exact path={ROUTE.COMMON.ABOUT} component={About} />
          <Route exact path={ROUTE.COMMON.NOTICE} render={() => <ErrorPage notice="개발중인 페이지 입니다." />} />
          <ConditionalRoute
            exact
            path={ROUTE.NON_AUTHORIZED.OAUTH}
            component={OAuth}
            condition={!user}
            redirectPath={ROUTE.AUTHORIZED.MY_PROJECT}
          />
          <ConditionalRoute
            path={ROUTE.NON_AUTHORIZED.LOGIN}
            component={Login}
            condition={!user}
            redirectPath={ROUTE.AUTHORIZED.MY_PROJECT}
          />
          <ConditionalRoute
            path={ROUTE.AUTHORIZED.USER_PROFILE}
            component={LoadableUserProfile}
            condition={!!user || isLoading}
          />
          <ConditionalRoute
            path={ROUTE.AUTHORIZED.SCRIPT_PUBLISHING}
            component={LoadableScriptPublishing}
            condition={!!user || isLoading}
          />
          <ConditionalRoute
            path={ROUTE.AUTHORIZED.NEW_PROJECT}
            component={LoadableNewProject}
            condition={!!user || isLoading}
          />
          <ConditionalRoute
            path={ROUTE.AUTHORIZED.PROJECT_MANAGE}
            component={LoadableManage}
            condition={!!user || isLoading}
          />
          <ConditionalRoute
            path={ROUTE.AUTHORIZED.STATISTICS}
            component={LoadableStatistics}
            condition={!!user || isLoading}
          />
          <ConditionalRoute
            path={ROUTE.AUTHORIZED.PROJECT_DETAIL}
            component={LoadableProjectDetail}
            condition={!!user || isLoading}
          />
          <ConditionalRoute
            path={ROUTE.AUTHORIZED.MY_PROJECT}
            component={LoadableMyProject}
            condition={!!user || isLoading}
          />

          <Redirect to={ROUTE.COMMON.HOME} />
        </Switch>

 

지금까지 간과하고 있었는데, 같은 로직이 중복되는 코드가 너무 많음을 알 수 있다.

 

유지보수가 쉬운 코드를 위하여 공통된 로직을 추상화했다.

 

<Switch>
  <Route exact path={ROUTE.COMMON.HOME} component={LoadableHome} />,
  <Route exact path={ROUTE.COMMON.ABOUT} component={About} />,
  <Route exact path={ROUTE.COMMON.NOTICE} render={() => <ErrorPage notice="개발중인 페이지 입니다." />} />
  {nonAuthorizedRoute.map(({ path, component, redirectPath }) => {
  return <ConditionalRoute path={path} component={component} condition={!user} redirectPath={redirectPath} />;
  })}
  {authorizedRoute.map(({ path, component }) => {
  return <ConditionalRoute path={path} component={component} condition={!!user || isLoading} />;
  })}
  <Redirect to={ROUTE.COMMON.HOME} />
</Switch>

권한이 필요한 Path와 권한이 필요없는 Path를 상수화하여, render로직에서는 map으로 순회만하는 코드로 바꾸었다.

이렇게 하니, 훨씬 가독성도 높아지고 새로운 Path를 추가한다던지 할때 유용해진것같다.

커밋: https://github.com/woowacourse-teams/2021-darass/commit/8906d7832d7cae843cda26a8fa60dbf634295cf4

 

간단한 리팩터링이지만, 코드퀄리티가 높아진 기분이다.

앞으로도 이렇게 냄새가 나는 코드들을 잡아낼 수 있도록 후각을 발달시켜야겠다.