[ 22 ] 게시판 삭제 후 리패치 연습

버튼 클릭시 특정 요소임을 알려주는 방법

e.target.id 로 특정 게시글을  전달한다.

  const onClickDelete = (e) => {
    deleteBoard({
      variables: {
        number: Number(e.target.id),
        refetchQueries: [{ query: FETCH_BOARDS }],
      },
    });
  };            
            
            
            <button id={el.number} onClick={onClickDelete}>
              삭제
            </button>

React의 key 속성 

리액트의 ' key ' 속성은 리스트( 자바스크립트의 배열 ) 를 렌더링할 때 각 리스트 아이템에 고유한 식별자를 부여하기 위해 사용된다. 

 

리스트 렌더링시 key 속성을 사용하지 않으면?

 

리스트 렌더링시 각 요소에 key 속성을 주지 않으면 동일한 요소로 간주하여 재사용하기 때문에, checkbox를 체크한 뒤 요소를 삭제해도 checkbox는 유지되는 버그가 발생하게 된다

 

주의사항!

key 속성의 값은 고유한 값으로 설정해줘야 한다. map 함수의 index를 사용하게 되면 , 요소의 변경 후에도 index가 유지될 수 있어 원인모를 버그가 생기게 된다.

 

쿼리 Mutation 이후 리패치 하기

  const onClickDelete = async (e) => {
    const result = await deleteBoard({
      variables: {
        number: Number(e.target.id),
      },
      refetchQueries: [{ query: FETCH_BOARDS }],
    });
    console.log(result.data.deleteBoard.message);
  };

 

전체 실습 코드 

import { useQuery, gql, useMutation } from "@apollo/client";
import { Fragment } from "react";

const FETCH_BOARDS = gql`
  query {
    fetchBoards {
      number
      writer
      title
      contents
    }
  }
`;

const DELETE_BOARD = gql`
  mutation deleteBoard($number: Int) {
    deleteBoard(number: $number) {
      message
    }
  }
`;

export default function StaticRoutingMovedPage() {
  const { data } = useQuery(FETCH_BOARDS);

  const [deleteBoard] = useMutation(DELETE_BOARD);

  const onClickDelete = async (e) => {
    const result = await deleteBoard({
      variables: {
        number: Number(e.target.id),
      },
      refetchQueries: [{ query: FETCH_BOARDS }],
    });
    console.log(result.data.deleteBoard.message);
  };

  return (
    <div>
      {data?.fetchBoards.map((el) => (
        <Fragment key={el.number}>
          <input type="checkbox"></input>
          <span style={{ margin: "10px" }}>{el.number}</span>
          <span style={{ margin: "10px" }}>{el.writer}</span>
          <span style={{ margin: "10px" }}>{el.title}</span>
          <span>
            <button id={el.number} onClick={onClickDelete}>
              삭제
            </button>
          </span>
        </Fragment>
      ))}
    </div>
  );
}