💻 TIL 23.03.16

김영우(Yeongwoo Kim)·2023년 3월 16일

component mui reactjs refactoring typescript

💪 MainPage Refactoring

지난 게시글에서 말했듯이 우리는 NextJs에서 ReactJs로 migration을 진행하기로 했다.

처음으로 진행해보는 migration이라서 어떻게 시작할지 막막해서 계획을 세워보기로 했다.

📄 현재 처한 상황

현재 우리 페이지는 auth.xxx.com, learn.xxx.com, main.xxx.com, admin.xxx.com 4개로 이뤄져있다.
같은 NavBar를 사용하는 learn page와 main page를 합치려고 한다.
하지만 현재 learn page는 MUI를 사용할 수 있는 세팅이지만 main page는 초기에 MUI를 사용하기로 하지 않아서 theme.ts가 존재하기 때문에 MUI를 사용할 수 없는 상태이다.

이번에 팀원과 code Review를 하며 깨달은 것이 있는데, 해당 부분이 main page의 코드를 작성할 때 아예 적용되지 않았던 것 같아서 적용하려한다

"함수 하나에 하나의 동작이 이뤄질 수 있도록 하는게 좋을 것 같아요" 라는 review가 있었다.
해당 review를 보고 간단하게 refactoring을 진행해 봤는데 생각보다 아주 만족스러웠다.

before

const Detail_Study = () => {
   const [curTapId, setCurTapId] = useState(0);
   const handleClickTap = (id: number) => {
     if (id === 1 || id === 0) setCurTapId(id);
   };
return (
  <>
    <Layout>
      <DetailHeadContainer>
        <StudyImg />
        <HeadRightBox>
          <SeperateHeartBtn>
            <StudyName>...</StudyName>
            <HeartBtn />
          </SeperateHeartBtn>
          <TeacherName>...</TeacherName>
          <StudyTag study_tag={study_detail_tag} />
          <SummaryStudy>...</SummaryStudy>
          <StudyDeadLine>...</StudyDeadLine>

          <Link href="/apply_math">
            <HeadBottomBtn disabled>...</HeadBottomBtn>
          </Link>
          <div
            style={{
              display: 'flex',
              justifyContent: 'flex-end',
            }}
          >
            <a
              href="http://pf.kakao.com/_yKHxnxj/chat"
              target="_blank"
              rel="noreferrer"
            >
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <KakaotalkContent>...</KakaotalkContent>
                <Image/>
              </div>
            </a>
          </div>
        </HeadRightBox>
      </DetailHeadContainer>
      <TabContainer>
        <TabTitleContainer>
          {TAB_INFO.map((item) => {
            return (
              <TabTitleBox
                active={curTapId === item.id}
                first_tab={item.id === 0}
                key={item.id}
                onClick={() => handleClickTap(item.id)}
              >
                {item.title}
              </TabTitleBox>
            );
          })}
        </TabTitleContainer>
        <TapContentsContainer>
          {TAB_INFO.map((item) => {
            if (curTapId === item.id) {
              return item.contents;
            }
          })}
        </TapContentsContainer>
      </TabContainer>
    </Layout>
  </>
);

after
```
const Detail_Study = ({ study }: DetailProps) => {
 return (
   <Layout>
     <DetailHeadContainer>
       <StudyImg imageSrc={study.img} />
       <Head study={study} />
     </DetailHeadContainer>
     <DetailStudyTab study={study} />
   </Layout>
 );
};
function Head({ study }: DetailProps) {
 return (
   <HeadRightBox>...</HeadRightBox>
 );
}
function DetailStudyTab({ study }: DetailProps) {
 ...
 return (
   <TabContainer>...</TabContainer>
 );
}
```
before 코드는 Detail_Study component에 모든 로직이 들어가 있다. 하지만 Detail_Study 안에 있는 로직을 나눠보면 Head와 Tab으로 나눌 수 있었다. 그래서 Head와 DetailStudyTab을 따로 함수로 만든 뒤 Detail_Study component에서 분리시켰다.

이렇게 했을 때, 다른 개발자가 해당 component를 봤을때 어떤 기능을 하는지 확실하게 알 수 있을 것 같았다. 또한 detail_study에서 수정사항이 발생했을 때, Head를 고쳐야하면 Head 함수에 가고, Tab을 수정해야하면 DetailStudyTab에 가서 수정하면 되기 때문에 refactoring적 면에서도 매우 좋을 것 같았다.

또한 component와 함수의 구분을 위해서 component는 arrow function으로 작성했고, 함수는 일반 function을 통해 정의를 내렸다.

🗓️ 계획

위의 완료된 예시를 기준으로 함수 하나에 기능 하나를 만들 것이다.

현재 모든 component에는 기능뿐만 아니라 style 또한 함께 있는데, 이를 분리 시킬예정이다. 또한 공동 컴포넌트와 한 페이지에서만 사용하는 컴포넌트 또한 분리할 예정이다.

예시

 // before
 ├── components
 │   ├── Header.tsx
 │   ├── Footer.tsx
 │   ├── TabStudyIntroduce.tsx
 │   ├── TabBookIntroduce.tsx
 │   └── Tag.tsx
 ├── page
 │   ├── mainPage.tsx
 │   └── detailStudyPage.tsx
 └── run
 
 
 // after
 ├── components
 │   ├── Header.tsx
 │   ├── Footer.tsx
 │   └── Tag.tsx
 ├── page
 │   ├── mainPage
 │   │   └── index.tsx
 │   └── detailStudyPage
 │       ├── index.tsx
 │       ├── TabStudyIntroduce.tsx
 |       └── TabBookIntroduce.tsx
 ├── style
 │   ├── components
 │   │   ├── HeaderStyled.tsx
 │   │   ├── FooterStyled.tsx
 │   │   └── TagStyled.tsx
 │   └── page
 │       ├── mainPage
 │       │   └── MainPageStyled.tsx
 │       └── detailStudyPage
 │           ├── DetailStudyPageStyled.tsx
 │           ├── TabStudyIntroduceStyled.tsx
 |           └── TabBookIntroduceStyled.tsx
 └── run

느낀점

음... 기존 learn page를 제작하면서 Main page도 learn page 처럼 만들어야하는데...해야하는데...라고 생각만하고 실천하기 두려웠었다...(너무 양이 많아서..) 하지만 어떻게 보면 지금이 고쳐야할 분량이 적을 때가 아닌가라고 생각했고. 이번 기회에 싹다 고치고 미래를 기약하자는 마음으로 Refactoring을 시작하려한다.
나에게 나는 데드라인을 주고 빡세게 해보려한다. 다음주까지 마무리 해보도록 할 것이다! 화이팅ㅎ..

김영우(Yeongwoo Kim)

차근차근 성장하는 개발자입니다

이전 포스트

💻 TIL 23.03.13

다음 포스트