[리팩토링] 포트폴리오 프로젝트콘텐츠 리팩토링

리팩토링을 찾아보고 나의 포트폴리오사이트의 코드를 다시 보던중 필요없이 분리되어있는 컴포넌트를 발견하여 바로 실행하였다.

필요한 컴포넌트의 분리 & 불필요한 컴포넌트의 분리

컴포넌트를 분리하는 것에 정답이 있을까? 일단 나의 경우 하드코딩되어 있는 부분을 컴포넌트화하는것은 불필요한 분리라고 생각했다. 그러다 가독성이 떨어지니 최대한 하나의 내용이 들어있는 컴포넌트로 분리를 하다보니 발견된 필요없이 분리되어있는 컴포넌트.. 오늘은 컴포넌트 분리에 대해 기록하려 한다.

일단 About섹션에는 카테고리와 콘텐츠가 들어가는 컴포넌트를 분리했다.

선택된 카테고리에 index를 지정하여 컴포넌트를 넣어 클릭시 해당 컴포넌트가 콘텐츠로 보이게 작업을 하였는데, Tech Stack과 DesignSkill, Workexperience가 실시간으로 변경되는 값이 아니기에 하드코딩을 하고 아래 Project와 Toy Project는 추후 계속 추가되거나 수정될 예정이여서 컴포넌트를 나누어 놓았다.

리팩토링이 필요해 보이는 구조

Main페이지 내에 이미지 슬라이드와 About 섹션이 들어있다.
About섹션안에 카테고리를 선택하여 해당 콘텐츠가 보이는데, About에서 시작된 컴포넌트 분리는 다음과 같다.

About섹션 👉 Category.js & ContentData.js

• Category.js => About.js에 있는 Tab함수를 받아 카테고리 li별로 onClick이벤트에 담아준다.
• ContentData.js => 카테고리에 지정된 index별로 변경될 컴포넌트가 들어있다.

// ContentData.js
function TechStack(){
  return (
    <>
    ...
    </>
    );
}

function Workexperience(){
  return (
    <>
    ...
    </>
    );
}

function DesignSkill(){
  return (
    <>
    ...
    </>
    );
}

function Project() {
  return (
    <>
      <ProjectCard />
    </>
  );
}

function ToyProject() {
  return (
    <div className="contentWrap">
      <ToyProjectCard />
    </div>
  );
}

const stackContent = {
  0: <TechStack />,
  1: <Workexperience />,
  2: <DesignSkill />,
  3: <Project />,
  4: <ToyProject />,
};
export default stackContent;

🧐 코드가 길어 가독성이 떨어지므로 컴포넌트를 각 카테고리별로 나누고보니 stackContent에 들어있는 Project컴포넌트와 ToyProject의 컴포넌트가 필요가 없어보인다.

// About.js

function About() {
  const [tab, setTab] = useState(0);

  return (
    <AboutWrap>
      <div className="aboutContainer">
        <h3>About</h3>
        <Category tab={tab} setTab={setTab} />
        <div className="contentContainer">{ContentData[tab]}</div>
      </div>
    </AboutWrap>
  );
}
export default About;

🧐 About.js안에 위의 두 컴포넌트를 넣어 필요없는 컴포넌트는 정리하였다.

// About.js

function About() {
  const [tab, setTab] = useState(0);

  const stackContent = {
    0: <TechStack />,
    1: <Workexperience />,
    2: <DesignSkill />,
    3: <ProjectCard />,
    4: <ToyProjectCard />,
  };

  return (
    <AboutWrap>
      <div className="aboutContainer">
        <h3>About</h3>
        <Category tab={tab} setTab={setTab} />
        <div className="contentContainer">{stackContent[tab]}</div>
      </div>
    </AboutWrap>
  );
}
export default About;

✏️ 프로젝트를 진행하면 변경되는 사항이 많아진다.
이에 맞춰 컴포넌트도 계획적으로 구조를 짜서 작업을 했음에도 불구하고 이렇게 후에 다시 수정하는 상황이 발생했다. 많은 프로젝트를 하면서 이러한 시행착오가 줄어들기 위해 구조를 짜는것에 좀더 공들여 작업해야겠다.