[React] Edit Page 보완 - defaultValue와 myvariables

지난번에 만든 등록페이지와 수정페이지

https://sy-blog.tistory.com/103

[React] 컴포넌트(Component) 재사용

여기서 수정하기는 구현했지만 조금의 문제가 있었다..!!

 

 

수정페이지로 이동했을 때 하나의 input 만 채우고 수정해버리면 나머지 내용이 사라진다는 것....

이유는 state! 코드를 살펴보면

const [writer, setWriter] = useState("");
const [title, setTitle] = useState("");
const [contents, setContents] = useState("");

writer, title, contents의 초기값은 공백이다

const onClickUpdate = async () => {
    //수정하기 뮤테이션 날리기
    const result = await updateBoard({
      variables: {
        number: Number(router.query.number),
        writer: writer,
        title: title,
        contents: contents,
      },
    });
    //2.상세페이지로 이동하기
    alert("수정되었습니다");
    router.push(`/section07/10_boards/${router.query.number}`);
  };

따라서 수정페이지에 입력을 하면 입력한 값만 채워지고 나머지는 공백으로 나온다.

 

두가지를 수정할 건데

1. 수정하기 버튼을 눌러 수정페이지로 이동했을 때 기존에 입력했던 값 보여주기(fetchBoard에서 가져오면 됨)

2. writer, title, contents 중 하나만 수정해도 나머지값들은 그대로 존재해야됨!!

 

첫번째 부분부터 수정해보자

기존에 입력했던 값을 보여주기 위해서는 html에서 기본으로 제공하는 defaultValue를 사용하면 된다.

 

fetchBoard에서 데이터를 가져와야 하기 때문에 import 해주기!

//수정페이지

import BoardWrite from "@/src/components/units/board/08_write/BoardWrite.container";
import { FETCH_BOARD } from "@/src/components/units/board/08_write/BoardWrite.queries";
import { useQuery } from "@apollo/client";
import { useRouter } from "next/router";

export default function BoardNewPage() {
  const router = useRouter();

  const { data } = useQuery(FETCH_BOARD, {
    variables: { number: Number(router.query.number) },
  });

  return <BoardWrite isEdit={true} data={data} />;
}

defaultValue 사용

<div>
      <h1>{props.isEdit ? "수정" : "등록"}페이지</h1>
      작성자:{" "}
      <RedInput
        type="text"
        onChange={props.onChangeWriter}
        defaultValue={props.data?.fetchBoard.writer}
      />{" "}
      <br />
      제목:{" "}
      <input
        type="text"
        onChange={props.onChangeTitle}
        defaultValue={props.data?.fetchBoard.title}
      />{" "}
      <br />
      내용:{" "}
      <input
        type="text"
        onChange={props.onChangeContents}
        defaultValue={props.data?.fetchBoard.contents}
      />{" "}
      <br />
      <BlueButton
        onClick={props.isEdit ? props.onClickUpdate : props.onClickSubmit}
        color={props.mycolor}
      >
        {props.isEdit ? "수정하기" : "등록하기"}
      </BlueButton>
    </div>

다음과 같이 수정페이지로 이동했을 때 데이터가 그대로 보이게 된다. 하지만 defaultValue는 fetchBoard의 값만 보여줄 뿐 실제 데이터가 들어있지 않기 때문에 여전히 수정하기를 누르면 값이 모두 사라져버린다.

 

그렇다면 2. writer, title, contents 중 하나만 수정해도 나머지값들은 그대로 존재해야됨!!

을 구현해보자

 

const myvariables = { number: Number(router.query.number) };
    if (writer) myvariables.writer = writer;
    if (title) myvariables.title = title;
    if (contents) myvariables.contents = contents;

myvariables라는 변수를 만든다음 number는 변해서는 안되기 때문에 초기값으로 둔다.

 

if문은 살펴보면 if(writer) 는 state writer가 빈 값이 아니라면 state writer에 있는 값을 추가한다는 뜻이다

나머지 title과 contents도 마찬가지!

const onClickUpdate = async () => {
    const 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,
    });
    //2.상세페이지로 이동하기
    alert("수정되었습니다");
    router.push(`/section07/10_boards/${router.query.number}`);
  };

여기서 variables : {myvariables}, 가 되지 않도록 주의!!

 

이렇게 코드를 수정한 후 실행해보면

 

두가지 문제점을 모두 보완했다.

오늘 배운거 잘 복습하고 기억해두자😆