[🐈 하루메이트] 리팩토링- footer

부트캠프 때 진행한 메인 프로젝트에서
내가 맡은 파트를 리팩토링 할 예정이다.

우선 간단한 footer 컨포넌트 먼저 진행하려고 한다.

footer 특징

• footer는 특정 경로에서는 보이지 않는다.
• 서버에서 가져오는 데이터가 없고 팀원들의 정보가 작성되어 있다.

🛠️ 기존 코드의 문제점

<FooterContainer ispath={ispath}>
      <InfoText>
        <li>
          <a
            href="깃헙링크"
            target="_blank"
            rel="noreferrer"
          >
            팀원이름
            <span>Front-End</span>
          </a>
        </li>
        .
        .
        .       
       
        <li>
          <a
            href="깃헙링크"
            target="_blank"
            rel="noreferrer"
          >
            팀원이름
            <span>Back-End</span>
          </a>
        </li>
      </InfoText>
      <FooterText>Copyright2023. 6 can do it all rights reserved.</FooterText>
    </FooterContainer>

보는 것 처럼 리스트가 반복되는 구조이다.

반복되는 UI 는 Array.map() 을 활용해서 축약할 수 있습니다.
리액트 리팩토링 가이드, react refactoring guide - @rayong님

🛠️ 리팩토링

//constant.ts
export const FOOTER_DATA = [
  {
    id: 1,
    name: '팀원이름',
    type: 'Front-End',
    url: '깃헙링크',
    target: '_blank',
    rel: 'noreferrer',
  },
  .
  .
  .
  {
    id: 6,
    name: '팀원이름',
    type: 'Back-End',
    url: '깃헙링크',
    target: '_blank',
    rel: 'noreferrer',
  },

//footer.tsx
import { FOOTER_DATA } from '../../utils/constant/constant';
.
.
.
return (
  <FooterContainer ispath={ispath}>
    <InfoText>
      {FOOTER_DATA.map((team) => {
        return (
          <li key={team.id}>
            <a href={team.url} target={team.target} rel={team.rel}>
              {team.name}
              <span>{team.type}</span>
            </a>
          </li>
        );
      })}
    </InfoText>
    <FooterText>
      Copyright 2023. 6 can do it all rights reserved.
    </FooterText>
  </FooterContainer>
);

기존 코드 보다 코드를 줄일 수 있었다.
또한 map 메서드의 요소를 다른 팀원들이 봤을 때 이해하기 쉽도록
team으로 작업해 주었다.

🤔 특정 path에 footer 안 보이게 하기

이미 해당 footer는 path의 상태에 따라 display:none으로 안 보이게 처리한 상태이다.

허나 이럴 경우 초기 로딩 속도는 빨라지지만
화면에 숨겨진 상태로 남아있기 때문에 메모리 사용에 영향을 줄 수 있다고 한다.

💡 그럼 조건문으로 처리하면 되겠다!

❗️ but
조건문으로 처리할 경우 메모리에 영향을 주지 않겠지만
해당 경로로 이동 할 때 마다 footer가 마운트되어 조금 느려 질 수 있다고 한다.

현재 상황에서는 footer의 비중이 높지 않고
추후 유지보수하기 편하게 하기위해 조건문을 선택했다.

삼항 연사자로 처리할 수도 있었지만
현재 상태에서 여러 조건이 들어가 가독성을 생각 했을 때 if문이 적합하다고 생각했다.

const Footer = () => {
  const ispath = useLocationEndpoint();

  if (ispath === 'community' || ispath === 'mypage' || ispath === '') {
    return (
      <FooterContainer>
        <InfoText>
          {FOOTER_DATA.map((team) => {
            return (
              <li key={team.id}>
                <a href={team.url} target={team.target} rel={team.rel}>
                  {team.name}
                  <span>{team.type}</span>
                </a>
              </li>
            );
          })}
        </InfoText>
        <FooterText>
          Copyright 2023. 6 can do it all rights reserved.
        </FooterText>
      </FooterContainer>
    );
  }
  return null;
};

이로 인해 footer 파일의 코드가 간소화 되었고
스타일 대신 조건문(if 문)으로 작업해 유지보수 및 가독성을 높힐 수 있었다.