[ 25 ] 게시판 수정하기 실습 2편

개선사항

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