✍🏻 [Code Camp_TIL] 8일차: Component 재사용

공통 component 만들어서 재사용하기

만들고 있는 게시판에서 등록 페이지와 수정 페이지는 동일한 컴포넌트를 사용한다. 지금까지는 두 페이지를 각각 따로 만들었는데, 유지보수가 어렵다는 단점이 있었다. 변경사항이 생기면 일일이 다 수정을 해줘야 하는 점이 비효율적이었다.

그래서 이번에는 공통 component를 만들어서 각각의 페이지에 import만 해주었다. 이렇게 하면 여러 번 페이지를 만들 필요도 없고 수정도 component에서 한 번만 해주면 된다.

// 등록 페이지
import BoardComponent from "../../../src/components/units/board/board-component";

export default function BoardComponentNewPage() {
  return <BoardComponent />;
}

// 수정페이지
import BoardComponent from "../../../src/components/units/board/board-component";

export default function BoardComponentEditPage() {
  return <BoardComponent />;
}

공통된 component 외에 두 페이지에서 다르게 설정해줘야 하는 부분들이 있다면 props와 삼항연산자를 활용했다.

등록페이지와 수정페이지는 페이지의 큰 제목이 '등록페이지'와 '수정페이지'로 다르고, 버튼이 각각 '등록하기'와 '수정하기'로 차이가 있다. 따라서 먼저, 각 페이지에 isEdit의 boolean 값으로 각각 'false'와 'true'를 넣어주고, 이를 컴포넌트로 넘겨주었다.

// 등록페이지
return <BoardComponent isEdit={false} />;

// 수정페이지
return <BoardComponent isEdit={true} />;

그 다음 component에서 isEdit의 boolean 값에 따라 '등록' 혹은 '수정'이 나오도록 해주면 된다!

// src/components/units/board/board-component/index.js

export default function BoardComponent(props) {
  return (
    <div>
      <h1>{props.isEdit ? "수정" : "등록"}페이지</h1>
      제목: <input type="text" />
      내용: <input type="text" />
      <button>{props.isEdit ? "수정" : "등록"}하기</button>
    </div>
  );
}

컴포넌트를 사용해서 유사한 UI와 기능을 효율적으로 만들 수 있고, 유지보수 측면에서도 편리하다는 것을 배울 수 있는 시간이었다. 아직은 props와 삼항연산자를 활용해서 공통 component로 만들 수 없는 차이를 제대로 구현하는 연습이 더 필요할 것 같다. 앞으로 프로젝트를 하면서 계속 공통 component를 만들고 import해서 사용하는 방식을 적용해보며 익숙해져야겠다!

---