✍🏻 [Code Camp_TIL] 9일차: defaultValue

defaultValue

만약 특정 값을 수정한다면, 수정한 값만 업데이트 되어야 한다. 수정하지 않은 기존의 값들은 업데이트 되지 않도록 하는 것이 효율적이다. defaultValue를 사용하면 수정된 부분만 업데이트 되도록 할 수 있다. defaultValue는 input 태그의 속성 중 하나이다.

하지만 이렇게 해줬음에도 특정 값을 수정한 후에 다른 페이지로 넘어갔을 때 수정하지 않은 것들의 defaultValue가 삭제되어 빈 값이 들어가는 문제가 발생한다.

state의 초기값 때문인데, defaultValue는 실제 state가 아닌 input의 속성이기 때문에 화면 상에는 나타나지만 state에 저장되지 않은 채로 백엔드 컴퓨터로 데이터가 전송된다.

이를 해결하기 위한 방법이 2가지가 있다. 먼저, input 창에만 defaultValue를 주지 말고, state에도 초기값으로 넣어주는 방법이 있다.

혹은 state에 초기값을 넣지 말고, '수정하기' 버튼을 클릭하면 검사해서 값이 바뀌지 않은 데이터들은 백엔드 컴퓨터로 보내지 않는 방법이 존재한다.

첫 번째 방법은 바뀌지 않은 값도 백엔드 컴퓨터로 보내기 때문에 데이터가 큰 경우 백엔드로의 전송 속도가 느려질 수 밖에 없다. 따라서 두 번째 방법이 훨씬 효율적이다.

다음과 같은 방법으로 변경된 부분만 mutation으로 보내줄 수 있다!

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

number의 경우, 꼭 들어가야 하기 때문에 미리 myVariables 객체에 넣어주고, 나머지는 조건문을 활용해서 해당 state가 빈 값이 아닐 때에만 key와 value를 추가해준다.