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

BoardWrite()라는 컴포넌트를 만들어서

등록페이지와 수정페이지에서 재사용 할 것이다

 

vscode의 창을 이렇게 분할해서 쓰면 편하다

 

등록페이지에 들어갔을때는 등록이라고 뜨고, 수정페이지에 들어갔을 때는 수정이라고 떠야하는데 페이지 2개를 만들 필요없이 컴포넌트를 재사용해서 만들 수 있다.

 

export default function BoardWriteUI(props) {

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

 

props를 이용하면 된다.

{props.isEdit ? "수정하기" : "등록하기"} 에서 isEdit가 true면 수정하기 false면 등록하기가 뜬다.

 

 

 

 

여기서 주의할 점은 number 인데

등록하기 버튼을 눌렀을 때 실행되는 onCliclSubmit 함수를 보면

 

const onClickSubmit = async () => {
    const result = await createBoard({
      variables: {
        writer: writer,
        title: title,
        contents: contents,
      },
    });
    alert(result.data.createBoard.message);
    router.push(`/section07/10_boards/${result.data.createBoard.number}`);
  };

 

router.push(`/section07/10_boards/${result.data.createBoard.number}`);

라우터를 이용해서 페이지를 이동하는 것을 확인 할 수 있다. 여기서 result.data.createBoard.number는 graphql에서 받아온 데이터이다.

export const CREATE_BOARD = gql`
  mutation createBoard($writer: String, $title: String, $contents: String) {
    createBoard(writer: $writer, title: $title, contents: $contents) {
      _id
      number
      message
    }
  }
`;

 

다음과 같이 createBoard를 실행했을 때 DB에서 number를 받아올 수 있다. 이를 확인하기 위해 등록하기 버튼을 누르면

 

 

number를 확인할 수 있다. 그러면 이제 result.data.createBoard.number가 아니라 router.query.number를 사용할 수 있다.

 

section07/10_boards/[number]

//상세페이지

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

  const onClickEdit = () => {
    router.push(`/section07/10_boards/${router.query.number}/edit`);
  };

  return (
    <div>
      <h1>상세페이지</h1>
      <div>작성자: {data?.fetchBoard.writer}</div>
      <div>제목: {data?.fetchBoard.title}</div>
      <div>내용: {data?.fetchBoard.contents}</div>
      <div>{router.query.number}번 페이지로 이동되었습니다.</div>
      <button onClick={onClickEdit}>수정하기</button>
    </div>
  );
}

 

 

BoardWrite.container.js

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

 

이렇게 router.query.number를 사용한 걸 확인할 수 있다.

여기서 주의할점은

router.push(`/section07/10_boards/${result.data.createBoard.number}`);

으로 number를 push 해주지 않은 채 사용하게 되면 undefined 값을 받기 때문에 꼭 push 해주고 쓰기!!!