[Code Camp_TIL] 230323 DAY9

🎯 수업 목차

1. utils 파일
2. 컴포넌트 재사용성
3. defaultValue

---

👩🏻‍💻 오늘의 TIL

utils 파일

파일을 분리하여 관리하는 것은 협업과 유지보수에 있어서 정말 중요한 요소이다.
지금까지 실무용 폴더 구조로 Container, Presenter 방식으로 파일들을 분리해주었고 styles, queries 파일 또한 분리해줄 수 있었다.
여기서 추가로 공통적으로 쓰이는 함수를 한 곳에 저장하여 사용하는 방법도 있다.

예제

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}`
}

날짜 표현 함수를 작성하여 src 폴더의 commons 폴더 안의, libraries 폴더 안에 넣어두면 모든 페이지에서 import 하여 꺼내 쓸 수 있다.
자주 사용할 함수들을 한 곳에 모아두면 편리하다.

---

컴포넌트 재사용성

하나의 페이지를 컴포넌트로 나누는 이유는 재사용을 하기 위해, 유지보수가 용이하기 때문이다.
비슷한 구조를 가진 페이지를 작성할 때 하나의 컴포넌트를 재사용하면 시간 단축에 도움이 된다.

예제

index 파일

// 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} />;
}

presenter 파일

// 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>
  );
}

index 페이지에서 props로 전달해주는 isEdit의 boolean 타입에 따라 등록 페이지와 수정 페이지가 나올 수 있게 삼항 연산자를 사용한다.
값이 true면 수정, false면 등록이 보이도록 하여 컴포넌트를 재사용할 수 있다.

---

defaultValue

기존 데이터 보여주기

게시글을 수정하려면 기존에 작성한 게시글 데이터가 보여져야 한다.
Input 태그의 속성인 defaultValue를 사용하면 기존 데이터를 보여줄 수 있다.

수정한 값만 바꿔주기

원하는 부분만 수정하고 수정하기 mutation을 보내면 수정하지 않은 부분에는 "" 빈값이 들어가 값이 초기화 되는 것처럼 보인다.
이는 state의 초기값 때문이며 defaultValue는 state가 아닌 input의 속성이기 때문에 state에 저장되지 않기 때문이다.

💡 해결 방안

1. defaulValue를 state의 초기값으로 넣는 방법. (수정하지 않은 부분도 다시 데이터를 api로 보내주기 때문에 비효율적이다.)
2. 수정한 부분만 api로 보내준다. (변경된 데이터만 전송하기 때문에 더 효율적이다.)

예제

// 뮤테이션에 변경된 부분만 보내주기
const onClickUpdate = async () => {
    const myVariables = {
      number: Number(router.query.number),
    };
    if (writer) myVariables.writer = writer;
    if (title) myVariables.title = title;
    if (contents) myVariables.contents = contents;

    const result = await updateBoard({
      variables: myVariables,
    });
  };

myVariables라는 빈 객체를 선언하여 필수 값인 number는 미리 넣어두고,
조건문을 이용해 state가 빈 값이 아닐 경우 (=수정된 경우)에만 객체에 key와 value 값이 추가된다.
완성된 객체를 variables에 넣어서 mutation하면 변경된 값만 variables 안에 담기게 된다.

---

💡 알게된 것

• defaultValue 속성을 사용하면 받아온 데이터를 기존 데이터를 보여줄 수 있다.
• 같은 컴포넌트를 공유하는 페이지가 두 개 이상일 경우 삼항연산자 대신 조건부 렌더링을 사용하면 좋다.

---

🤔 궁금한 것

---

💖 느낀 점

서비스를 개발할 때 어려운 기능 중 하나가 수정 기능이라고 한다. 기존 데이터를 가져와서 수정을 한 뒤 다시 서버에 저장을 해야하는 이중 작업을 해야하기 때문이다. 직접 게시글을 수정하는 기능을 개발해보니 왜 까다로운지 체감이 된다. 새로 개발을 하는 것이 아닌 기존 서비스를 유지보수 하는 작업이라면 훠어어얼씬 힘든 일이 될 것 같다. 끝이 안 보이는 코드, 복잡하게 얽혀있는 코드를 헤치고 로직을 연결하는 건 만만치 않을 일일 것이다... 그래도 무사히 구현을 했을 때의 뿌듯함은 이루 말할 수 없을 것 같다. 나는 성취감에 원동력을 얻으니까! 한번 해내면 몇번이고 또 해낼 수 있을 거다!!