한 컴포넌트를 재사용해서 게시판 등록/수정 페이지 만들기

컴포넌트 재사용성

• React를 쓰는 가장 큰 이유!
• 하나 만들어놓고 수정 가능하기때문에 여러페이지 만들기 편하다!
• 수정하기 재사용 예시
  하나의 틀을 만들어서 -> 등록페이지 / 수정페이지로 바꾸기

게시판 등록하기 / 수정하기 나누기

📔 게시물 등록

📔 중요포인트

• isEdit 가 false면 등록페이지 , true면 수정페이지를 조건부 랜더링을 통해 적용한다.

<Title>{props.isEdit ? "게시물 수정" : "게시물 등록"}</Title>
{!props.isEdit && (
          <SubmitButton
            color={props.color}
            onClick={props.onClickCorrect}
            disabled={!props.color}>
            등록하기
          </SubmitButton>
        )}
        {props.isEdit && (
          <SubmitButton
            color={props.color}
            onClick={props.onClickMoveToEdit}
            disabled={!props.color}>
            수정하기
          </SubmitButton>
        )}

• 게시물 등록 컴포넌트 이용해서 등록페이지적용

return <NewWrite isEdit={false} />;

📔 게시물 등록 상세창

• 수정하기 버튼 누르면 게시물 수정 페이지로 이동하기

  async function onClickEdit() {
    router.push(`${router.query.number}/edit`);
  }
// 수정하기 이동 함수
<EditButton onClick={props.onClickEdit}>수정하기</EditButton>
// 버튼에 함수 적용

📔 게시물 수정

• 게시물 등록 컴포넌트이용해서 수정페이지적용

return <NewWrite isEdit={true} />;

• 수정하기 버튼 누르면 mutation update 적용 후 수정 상세창으로 이동하기

  async function onClickMoveToEdit() {
    try {
      await updateBoard({
        variables: {
          updateBoardInput: {
            title: myTitle,
            contents: myContents,
          },
          password: myPassword,
          boardId: router.query.number,
        },
      });
      router.push(`/boards/detail/${router.query.number}/`);
    } catch (error) {
      console.log(error);
    }
  }

📔 게시물 수정 상세창

📔 오류

수정하기 에러

1. 수정하기가 안눌러졌다.
2. 수정할때 비밀번호 값도 같아야한다.. id는 당연히 똑같은데 앞 등록하기의 비밀번호랑 같아야한다.

400 에러

1. 수정하기를 누르면 400 에러가 뜬다.
2. 대부분 queries 쪽 오타였다.