실무용 폴더구조로 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}일 경우 등록하기로 보여줄 수 있다.