개선사항
1. 게시글 수정 시 게시글의 내용이 Input에 들어가있게 한다.
2. 게시글의 원하는 부분만 수정되게 한다. 현재는 모든 input을 다시 보내서 수정하고 있다.
1. 수정하기 페이지에서 useQuery로 게시글의 내용을 받아온 뒤, props로 presenter 컴포넌트에 전달해서 defaultValue로 넣는다.
container에서 useQuery로 게시글의 내용을 받지 않고 수정 Page에서 받는 이유?
자바스크립트 코드는 container 컴포넌트에 적는 것이 좋지만 container 컴포넌트의 경우 게시글 등록과 게시글 수정에 모두 이용되고 있다보니, useQuery를 사용해서 데이터를 받아와도 게시글 등록에는 이용되지 않는다. 따라서 게시글 수정 페이지에서 useQuery를 사용하고 props로 container 컴포넌트에 전달한다.
상세 페이지 코드
import BoardWrite from "../../../../../src/components/units/board/09-write2/BoardWrite.container";
import { useQuery, gql } from "@apollo/client";
import { useRouter } from "next/router";
const FETCH_BOARD = gql`
query fetchBoard($number: Int) {
fetchBoard(number: $number) {
number
writer
title
contents
}
}
`;
export default function GraphqlMutationPage() {
const router = useRouter();
const { data } = useQuery(FETCH_BOARD, {
variables: {
number: Number(router.query.number),
},
});
return (
<div>
<div>###### 여기는 페이지 입니다#####</div>
<BoardWrite isEdit={true} data={data} />
<div>###### 여기는 페이지 입니다#####</div>
</div>
);
}
Container에서는 props로 다시 presenter로 넘긴다
<div>
<BoardWriteUI
onClickSubmit={onClickSubmit}
onClickUpdate={onClickUpdate}
onChangeWriter={onChangeWriter}
onChangeTitle={onChangeTitle}
onChangeContents={onChangeContents}
isActive={isActive}
isEdit={props.isEdit}
data={props.data} // undefined 이거나, data이거나 둘 중 하나 !
/>
</div>
presenter 컴포넌트
import { BlueButton, RedInput } from "./BoardWrite.style";
export default function BoardWriteUI(props) {
return (
<div>
<div>
작성자 :
<RedInput
type="text "
onChange={props.onChangeWriter}
defaultValue={props.data?.fetchBoard.writer}
/>
제목 :
<input
type="text"
onChange={props.onChangeTitle}
defaultValue={props.data?.fetchBoard.title}
/>
내용 :
<input
type="text"
onChange={props.onChangeContents}
defaultValue={props.data?.fetchBoard.contents}
/>
<BlueButton
onClick={props.isEdit ? props.onClickUpdate : props.onClickSubmit}
isActive={props.isActive}
>
{props.isEdit ? "수정" : "등록"}하기
</BlueButton>
;
</div>
</div>
);
}
2. if문을 사용해서 수정할 input만을 보낸다.
현재 코드를 보면 update에 writer, title, contents 를 모두 보내고 있다. defaultvalue를 설정해주긴 했지만 상태변수로 저장한 것은 아니므로 아래의 코드처럼 요청을 보내면 바꾸지 않은 input은 초기값인 " " 로 업데이트가 된다. 따라서 variables 안에 바뀐 input만 넣어서 요청을 보내서 문제를 해결해야 한다.
수정 전 코드
const onClickUpdate = async () => {
const result = await updateBoard({
variables: {
number: Number(router.query.number),
writer: writer,
title: title,
contents: contents,
},
});
router.push(`/section09/09-04-boards/${router.query.number}`);
};
수정 후 코드
const onClickUpdate = async () => {
const myvariables = {}
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
},
});
router.push(`/section09/09-04-boards/${router.query.number}`);
};
728x90
'Frontend 프론트엔드' 카테고리의 다른 글
[ 27 ] 게시판에 타입스크립트 컨테이너/프리젠터 적용 실습 (0) | 2024.06.22 |
---|---|
[ 26 ] Next.js 에 타입스크립트 설정하기 (0) | 2024.06.21 |
[ 24 ] 게시판 수정하기 실습 1편 (0) | 2024.06.20 |
[ 23 ] 컴포넌트 재사용하기 실습 (0) | 2024.06.19 |
[ 22 ] 게시판 삭제 후 리패치 연습 (0) | 2024.06.19 |