[React] Single Responsibility Principle 리펙토링 하기

안녕하세요, 개발자 Sean입니다. 

 

저번 포스팅에서 SOLID 원칙에 대한 공부를 해봤으니 본격적으로 코드 리펙토링에 들어가려고 합니다. 

 

우선은 오늘 제가 수정할 코드는 아래와 같습니다. 

 

const Analytics = () => {

 //States
 const [isLoading, setIsLoading] = useState(false);

 //Hooks
 const dispatch = useDispatch();
 const analytics = useSelector((state) => state.analytics);
 const user = useSelector((state) => state.user);
 useEffect(() => {
   getTabList();
 }, [])
  //Methods
 const getTabList = async () => {
   setIsLoading(false)
   const results = await getAnalyticsTabList(user.userId);
   dispatch(saveAnalyticsTabList(results.data));
   setIsLoading(true)
 }

 return (
   <DndProvider backend={HTML5Backend}>
     <Wrapper className="content-wrapper">
       <SubCard
         sx={{
           px: 8,
           py: 1,
           minHeight: '86vh',
           '@media(max-width: 768px)': { padding: '30px 10px' },
         }}
       >
         {isLoading &&
           <>
             <Tabs />
               {analytics.tabList.map((el, i) => (
                 <TabPanel value={analytics.selectedTab} index={i} key={i}>
                   {(el.tab_type === "data-analytics" || el.tab_type ===  "data-analytics-timeseries" || el.tab_type ===  "data-analytics-stock") && <DataAnalysis />}
                   {(el.tab_type === "index-analytics" || el.tab_type === "index-analytics-multi") && <IndexAnalysis />}
                 </TabPanel>
               ))}
             <TabPanel value={analytics.selectedTab} index={analytics.tabList.length}>
               <InitiateCTA />
             </TabPanel>
           </>
         }
         {!isLoading && <LoadingData isLoading={isLoading} /> }
       </SubCard>
     </Wrapper>
   </DndProvider>
 );
};

export default Analytics;

네 코드가 어마어마하게 난잡하죠? ㅎㅎ

 

우선은 위 코드를 Single Responsibility Principle(SRP)에 따라 리펙토링 해보겠습니다. 

 

제일 먼저 위 코드가 어떤 역할을 하고 있는지 "정의"하는 게 중요하겠죠.

 

제가 나름대로 분석한 결과 위 코드는 아래와 같은 역할들을 수행하고 있습니다. 

• 데이터가 로딩중인지 체크하기
• analytics 정보를 가져오기
• user 정보를 가져오기
• tab list를 가져오기
• 뷰를 렌더링하기
• 타입에 따른 다른 탭 컴포넌트를 렌더링 하기

위 코드는 확실히 SRP를 어기고 있습니다. 여기서 "데이터가 로딩 중인지 체크하기" 기능은 아무런 역할을 하지 않는다는 사실을 깨달았습니다. (자식 컴포넌트들이 자체적으로 가지고 있더라고요 허허...) 그래서 과감하게 이 기능은 삭제했습니다. 

 

그리고 아래 세 가지 기능은 하나로 묶을 수 있음을 알 수 있었습니다. 왜냐하면 analytics와 user 정보를 이용해 tablist를 가져오고 있기 때문입니다. 따라서 아래 세 기능은 하나로 묶어 "tab list 가져오기" 혹은 "데이터 가져오기"로 묶어볼 수 있겠습니다. 

• analytics 정보를 가져오기
• user 정보를 가져오기
• tab list를 가져오기

그리고 이 기능을 처리하는 커스텀 훅을 아래와 같이 만들고, 

export const useTabList = () => {
 const dispatch = useDispatch();
 const analytics = useSelector((state) => state.analytics);
 const user = useSelector((state) => state.user);

 useEffect(() => {
   getTabList();
 }, [])
  const getTabList = async () => {
   const results = await getAnalyticsTabList(user.userId);
   dispatch(saveAnalyticsTabList(results.data));
 }

 return [analytics];
}

기존의 비즈니스 로직을 대체하면, 

아래와 같이 깔끔한 코드가 만들어집니다!

const Analytics = () => {

 const [analytics] = useTabList();

 return (
   <DndProvider backend={HTML5Backend}>
     <Wrapper className="content-wrapper">
       <SubCard
         sx={{
           px: 8,
           py: 1,
           minHeight: '86vh',
           '@media(max-width: 768px)': { padding: '30px 10px' },
         }}
       >
         <Tabs />
           {analytics.tabList.map((el, i) => (
             <TabPanel value={analytics.selectedTab} index={i} key={i}>
               {(el.tab_type === "data-analytics" || el.tab_type ===  "data-analytics-timeseries" || el.tab_type ===  "data-analytics-stock") && <DataAnalysis />}
               {(el.tab_type === "index-analytics" || el.tab_type === "index-analytics-multi") && <IndexAnalysis />}
             </TabPanel>
           ))}
         <TabPanel value={analytics.selectedTab} index={analytics.tabList.length}>
           <InitiateCTA />
         </TabPanel>
       </SubCard>
     </Wrapper>
   </DndProvider>
 );
};

export default Analytics;

이 정도만 해도 나름 깔끔한 코드라고 생각할 수 있지만 아래와 같이 아직은 하나 이상의 역할을 하고 있다는 것을 알 수 있습니다. 

• 타입에 따른 다른 탭 컴포넌트를 렌더링 하기

이 기능만 따로 처리가 된다면 코드가 정말 깔끔해질 것 같지 않나요?

 

그러니 아래와 같이 위 기능은 별도의 컴포넌트로 떼어 독립시키도록 하겠습니다. 

export const TabPanels = ({ analytics }) => {
 return (
   <>
     {analytics.tabList.map((el, i) => (
       <TabPanel value={analytics.selectedTab} index={i} key={i}>
         {(el.tab_type === "data-analytics" || el.tab_type ===  "data-analytics-timeseries" || el.tab_type ===  "data-analytics-stock") && <DataAnalysis />}
         {(el.tab_type === "index-analytics" || el.tab_type === "index-analytics-multi") && <IndexAnalysis />}
       </TabPanel>
     ))}
     <TabPanel value={analytics.selectedTab} index={analytics.tabList.length}>
       <InitiateCTA />
     </TabPanel>
   </>
 )
};

export default TabPanels;

그리고 기존의 코드를 대체하면...

Ooohooo! 어떤가요? 정말 코드가 간결해지지 않았나요?

const Analytics = () => {

 const [analytics] = useTabList();

 return (
   <DndProvider backend={HTML5Backend}>
     <Wrapper className="content-wrapper">
       <SubCard
         sx={{
           px: 8,
           py: 1,
           minHeight: '86vh',
           '@media(max-width: 768px)': { padding: '30px 10px' },
         }}
       >
         <Tabs />
         <TabPanels analytics={analytics}/>
       </SubCard>
     </Wrapper>
   </DndProvider>
 );
};

export default Analytics;

이제 이 컴포넌트는 단 2개의 역할만을 맡고 있습니다. 

 

1. 데이터를 가져와서

2. 뷰를 렌더링 한다.

 

모듈/함수/클래스가 단 하나의 역할만을 맡는다는 기존의 원칙에 100% 부합하기 위해선 별도의 컴포넌트를 만들어 props로 내려줄 수는 있지만 그러기엔 폴더가 너무 난잡해질 것 같으니 여기선 "데이터를 가져와서 렌더링 한다"라고 하나의 기능인 셈 쳐 주도록 하겠습니다. 

아래는 리펙토링 전과 후 코드 비교입니다.