board-edit/new

컴포넌트를 만들고 재사용하기
등록, 수정 글자도 하드 코딩이 아닌 페이지에서 받아서 출력하도록하기

props를통해서 직접 값을 보낼수도 있지만.
true, false 로 나눠서 true면 수정페이지, false 면 등록페이지 이런식으로 나눌수도 있음.

만들어보기

등록페이지, 상세페이지, 수정페이지 세개를 만들고
게시글 등록시 자동으로 상세페이지로 이동
상세페이지에서 수정하러가기 버튼 클릭시 수정페이지로 이동
수정 완료 버튼 클릭시 다시 상세보기 페이지로 이동하기.

등록,수정 페이지는 component 형태로

기능들은 기존에 했던것 응용해서 만들었는데

정상적으로 동작을 하는데

추가 사항

수정하기 버튼을 눌렀을때 기존값이 출력되도록하기

해당 기능은 props를 통해 값을 보내서

작성자: <RedInput type="text" onChange={props.onChangeWriter} defaultValue={props.data?.getBoard.writer}/>
제목: <RedInput type="text"  onChange={props.onChangeTitle} defaultValue={props.data?.getBoard.title} />
내용: <RedInput type="text"  onChange={props.onChangeContents} defaultValue={props.data?.getBoard.contents}/>

defaultValue를 사용하여 값을 줄 수 있다.

수정하기를 누르면 바로 현재값이 나오는데
여기서 값을 변경하지 않고 수정하기를 누르면 값이 비어있다고 나옴.

값을 저장하는 이벤트가 아직 한번도 동작하지 않아서 값이 저장되지 않아 생기는 문제

해결방안

1. state의 초기값에 defaultValue를 넣어주기

2. 수정한 값만 mutation에 보내기.

1번은 바꾸지 않은값도 mutation을 보내기 때문에 2번에 비해 비효율적임

variables의 값을 비어있으면 보내지 않도록 수정하고
Graphql에서도

title 과 contents는 필수값 표시 (!) 를 제거한다.

바꾸지 않은곳도 빈칸이 되거나 에러가발생하지 않도록 되었음.