input값 비활성화 처리하기
readOnly: 보이는건 다른 인풋값들과 똑같이 보이지만, 클릭이 안되도록 비활성화 처리를 해줍니다.disabled: 보이는것도 회색으로 처리하고 클릭도 안되도록** 비활성화 해줍니다.
input value 초기화
Input tag에는 비슷해보이지만 다른 속성이 있습니다. defaultValue와 value 인데요. 두 속성은 지정해주었을 때 처음 보여진다는 부분에서 비슷해보이지만 다릅니다.
defaultValue: input tag에서 처음 보여줄 값value: input tag에서 계속 보여줄 값
그렇기 때문에 defaultValue를 지정해주고 input 창에 입력을 하게되면 값이 수정되지만, value를 지정해주고 input 창에 입력하게되면 입력이 되지않고 지정해준 value값만 보여지게됩니다.
우리가 배운 방법으로 input 창이 변경되고, 초기화되도록 value 값에 data를 지정해주려면 아래와 같이 작성해주어야합니다.
// onChange 이벤트로 작성된 state 변수 writer
const [writer, setWriter] = useState('')
const onChangeWriter = (event) => {
setWriter(event.target.value)
}
<input value={props.writer} />위와 같이 작성된 input창의 value를 입력된 후 초기화 해주려면 state 값을 초기화해준다면 input 창도 초기화 됩니다.
수정한 값만 바꿔주기
우리가 게시물을 수정을 하게되면 수정한 값만 업데이트 되어야 합니다.
하지만 기존값이 유지되도록 하지 않고 수정을 하게되면 모든 부분이 업데이트 되는 것을 확인할 수 있습니다.
그러나 실제 게시글은 수정된 부분만 업데이트 돼야 하므로 이 부분을 보완해야 합니다.
📢 코드는 영상을 참고해주세요!
💡 수정 인풋에 내가 적었던 글 데려오기
→ 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에 넣어서 뮤테이션을 날려줍니다.
Typescript 적용하기
수정 페이지 변경된 값만 바꿔주기
우리는 지난 시간에 defaultValue와 빈 객체를 이용해 변경된 부분만 넣어 뮤테이션을 날려주는 방식으로 변경된 값만 바꿔주는 법을 배웠습니다.
수정 페이지 변경된 값을 바꿔주기를 위와 같은 방식으로 진행 할 것 이며, 타입스크립트를 배웠으므로 이 또한 적용해서 변경된 값만 바꿔 주도록 하겠습니다.
// 변경된 값만 뮤테이션 날려주기 + 타입스크립트(확장자 .tsx)
async function onClickUpdate(){
// 변경된 값만 넣어주는 빈객체 타입 정해주기
inrterface IMyUpdateBoardInput {
title?: string
contents?: string
}
// 변경된 값만 넣어주기 위한 빈 객체
const myUpdateBoardInput:IMyUpdateBoardInput = {}
// 변경된 값만 넣어주기
if(myTitle) myUpdateBoardInput.title = myTitle
if(myContents) myUpdateBoardInput.contents = myContents
// 뮤테이션 날려주기
try{
awiat udateBoard({
variables : {
boardId : router.query.aaa,
password : myPassWord,
upsdateBoardInput : myUpdateBoardInput
}
})
}catch(error){
alert(error.message)
}
}