📒 오늘 공부한 내용

🔍수업목차

[8-1] library폴더의 utils 파일 관리
[8-2] 컴포넌트 재사용성

✅ library폴더의 utils 파일 관리

---

• Container, Presenter 방식으로 파일을 분리해주었고, styles, queries 파일 또한 분리해 주었다.

• 파일을 분리해 관리하는 것은 협업과 유지보수에 있어 정말 중요한 요소다.

• 프로젝트 디자인에 수정사항이 생기면 styles 파일로, api 수정사항이 생겼을 경우에는 queries파일을 확인하면 되기 때문에 수정이 더욱 용이하다.

💡 폴더와 파일 이름은 회사마다 다르다.

• 공통적으로 쓰이는 함수를 한 곳에 저장하여 협업하는 사람들과 함께 사용하는 방법도 있다.

• 함수를 여러 번 만드는 것이 아니라, 한 번 만들고 Import로 가져오면 된다.

💡 회사의 디자인 수정으로 인해, 혹은 클라이언트의 요청으로 인해 기존에 ‘년도, 월, 일'로 표기하던 것을 ‘월, 일'만 화면에 보여주게끔 수정을 해야되는 상황이라면 20개의 페이지를 찾아 하나하나 다 바꿔주어야 할 것이다.
하지만, libraries 안에 날짜 표현 함수를 만들어 사용하는 페이지마다 Import를 하여 사용했다면, 해당 폴더에서 하나의 코드만 수정을 한다면 import한 20개의 페이지에서 수정되는것을 볼 수 있다.

export

freeboard_frontend / src / commons / libraries / utils.js


export const getDate = (date) => {
	const _date = new Date(date)
	const yyyy = _date.getFullYear()
	const mm = _date.getMonth() + 1 ; // 여기서 +1을 하는 이유는 월을 0~11로 받아오기 때문입니다
	const dd = _date.getDate()
	return `${yyyy}-${mm}-${dd}`
}

Import

import { getDate } from '~~/src/commons/libraries/utils';
export default function BoardListUI() {

	...

	return (
	<div>
	...
	{props.data?.fetchBoards.map((el, index) => (
		...
		<div>
			{getDate(el.createdAt)}
		</div>
	))}
	</div>
	)
}

결과

✅ 컴포넌트 재사용성

---

• 우리가 이전에 하나의 페이지를 컴포넌트로 나누어주는 이유는 재사용성과 유지보수가 용이하다는 것 이었다.

09-01-board-new

export default function BoardNewPage() {
  return (
    <>
      <h1>등록페이지</h1>
      제목: <input type="text" />
      내용: <input type="text" />
      <button>등록하기</button>
    </>
  );
}

09-01-board-edit

export default function BoardEditPage() {
  return (
    <>
      <h1>수정페이지</h1>
      제목: <input type="text" />
      내용: <input type="text" />
      <button>수정하기</button>
    </>
  );
}

• 이런식으로 등록컴포넌트와 수정컴포넌트를 따로 만들어주게 된다면 등록페이지가 바뀌게 된다 하더라도 수정페이지가 바뀌지 않는다는 문제가 발생한다.

09-02-board-component-new

import BoardComponent from "../../../src/components/units/board/09-board-component";

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




// 09-02-board-component-edit
import BoardComponent from "../../../src/components/units/board/09-board-component";

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

src/components/units/board/09-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>
  );
}

• 이렇게 컴포넌트에서 받은 isEdit를 다시 프레젠터로 넘겨주어 이 값에 따라 true이면 수정, false이면 등록이 보이도록 해준다면 컴포넌트를 재사용해서 등록페이지와 수정페이지를 모두 만들어줄 수 있다.