[TIL] 22.11.09 - utils 파일, 컴포넌트 재사용성

library폴더의 utils 파일 관리

실무용 폴더구조로 Container, Presenter 방식으로 파일을 분리하고, styles, queries 파일 또한 분리해 주었다.

여기서 더 추가하여, 공통적으로 쓰이는 함수를 한 곳에 저장하여 사용할 수 있다.

library 폴더를 만들고, util.ts 파일을 만들어 함수를 만들어주면 그 파일을 Import를 하여 여러 곳에서 사용 가능하고, 유지보수도 유리해진다.

export const getDate = (value: string) => {
  const date = new Date(value);
  const yyyy = date.getFullYear();
  const mm = date.getMonth() + 1;
  const dd = String(date.getDate()).padStart(2, "0");
  return `${yyyy}.${mm}.${dd}`;
};

예시로, 위와 같은 new Date함수를 사용하여 날짜 데이터를 원하는 방식대로 표현하고 싶을때, 본인이 원하는 함수를 만들고 utils.ts파일에 작성해준다.

이렇게 만든 함수를 사용하고 싶을때 원하는 곳에서 Import해주면 된다.

컴포넌트 재사용성

게시물 등록과 수정페이지의 경우 등록/수정 이라는 텍스트만 다를 뿐 모든 요소는 똑같다.

이와 같은 경우, 컴포넌트를 재사용할 수 있도록 작성해주어야 편리하다.

위의 사진에서, 첫번째는 게시물 등록 페이지, 두번째는 게시물 수정 페이지의 index이다.

이때, props로 등록 페이지는 isEdit={false} 를 전달하고, 수정 페이지는 isEdit={true} 로 전달해준다.

전달받은 props는 Boardwrite.container에서 다시 Boardwrite.presenter로 props로 넘겨준다.

그리고 나서 삼항연산자를 이용해 isEdit={true}일 경우 수정, isEdit={false}일 경우 등록하기로 보여줄 수 있다.