수정한 값만 바꿔주기

우리가 게시물을 수정을 하게되면 수정한 값만 업데이트 되어야 합니다.

하지만 기존값이 유지되도록 하지 않고 수정을 하게되면 모든 부분이 업데이트 되는것을 확인할 수 있습니다.

그러나 실제 게시글은 수정된 부분만 업데이트 돼야 하므로 이 부분을 보완해야 합니다.

❗️ 수정 인풋에 내가 적었던 글 데려오기
→ defaultValue에 기존값을 넣어두면 된다.

defaultValue란?
→ 인풋태그의 속성 중 하나이다.

문제는 defaultValue에 기존의 데이터를 데리고 오는 과정에서 fetch를 해주어야하는데 ,우리는 해당 컴포넌트를 재사용 하기 때문에 container에서 fetch 를 하게되면 등록과 수정 모두에게 적용됩니다.

하지만 수정에만 적용해야 하므로 fetch는 페이지 컴포넌트에서하고, 해당 data를 props로 넘겨주시면 됩니다.

defaultValue와 state

defaultValue를 줬음에도 불구하고 수정하기를 누르면, 수정하지 않은 부분에 defaultValue로 들어가는 것이 아닌 빈 값이 들어갑니다.

이는 state의 초깃값 때문입니다.

defaultValue는 실제 state가 아닌 input의 속성이기 때문에 실제 눈에 보이는 것과 달리 state에 저장되지 않습니다.

❗️ 그럼 어떻게 해결하는가?
→ 해결하는 방법은 크게 두가지가 있습니다.
1. defaultValue를 state의 초깃값으로 넣는 것 입니다.(비효율적)
2. 뮤테이션 할 때 백엔드에 변경된 부분만 보내줍니다.(효율적)

// 뮤테이션에 변경된 부분만 보내주기

cosnt xxx = async()=>{
const myVariables = {
		number : Number(router.query.mynumber),
	}

	//변경된 값만 객체에 key와 value 추가해주기
if(myWriter !== ""){ myVariables.writer = myWriter}
if(myTitle !== ""){ myVariables.title = myTitle}
if(myContents !== ""){ myVariables.contents = myContents}

	//뮤테이션 보내기
cosnt result = await ww({
			variables : myVariables
	})
}

코드를 보면, myVarialbes라는 빈 객체를 선언해 꼭 들어가야 하는 number를 넣어두고 조건문을 이용해 state가 빈값이 아닐 경우에만 객체에 key와 value를 추가해줍니다.

그리고 그렇게 완성된 객체를 variables에 넣어서 뮤테이션을 날려줍니다.

기능 구현 전, 나의 생각..

1. 게시물 상세페이지에 있는 '수정하기' 버튼을 클릭하면, 수정페이지(등록페이지 Component 재활용)로 이동하도록 구현
2. 수정하기 버튼을 클릭했을 때, 백엔드에서 수정 API를 호출시킬 수 있도록 graphql 세팅한다.
   게시물등록페이지에는 게시물ID가 없지만, 수정페이지에는 해당 게시물 ID가 존재한다. 이 점을 이용해서 fetchBoard API를 호출한다.
   페이지에 boardId가 있으면~ 데이터받아오고(수정페이지란뜻), 없으면 등록게시물이라는 뜻이므로 무시(optional chaining 활용)
3. 기존 작성해놓은 내용들을 불러온다. -> fetchBoard 사용
4. 변경한 내용들만 mutation에 담아서 백엔드 서버에 전송시킨다. (모든 데이터 state에 담아서 전달하는 것은 매우 비효율적임)