게시글 삭제하기

게시글을 삭제하려면
먼저 게시글마다 옆에 삭제 버튼을 만들어주고
onClick 기능으로 graphQL mutation으로 백엔드로 삭제 요청을 보내도록 하자

const DELETE_BOARD = gql`
  mutation deleteBoard($id: Int!){
	deleteBoard(id: $id){
	  message
	}
  }
`

const [deleteBoard] = useMutation(DELETE_BOARD)
const onClickDelete = async (event) =>{
  console.log(event.target.id)
  const id = Number(event.target.id)
  const result = await deleteBoard({
    variables: {
      id :id
    }
  })
  console.log(result)
}

<div>
  {data?.fetchBoards.map(el => (
  <div>
    <span>
      <input type="checkbox" />
    </span>
    <span style={myStyles}>{el.id}</span>
    <span style={{margin:"15px", padding: "0px"}}>{el.title}</span> 
    <span style={{margin:"15px"}}>{el.writer}</span>
    <span>
      <button id={el.id} onClick={onClickDelete}>
        삭제하기
      </button>
    </span>
  </div>
  ))}
</div>

삭제하기 버튼을 누르면

7번 글이 사라진걸 볼 수 있음.

refetch

현재는 삭제 후 직접 새로고침을 해야 적용되는데
자동으로 새로고침 되도록 해보자

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

삭제 기능속에 refetchQueries를 사용해서 어떤 쿼리로 refetch 할건지 입력하면
삭제버튼 클릭시 즉시 적용되는걸 알 수 있다.

현재 체크박스를 선택하고 삭제하면

체크박스는 남아있게 된다.

map을 사용해서 만들다 보면 최대한 효율적으로 만들다 보니
제대로 구분이 안되어있음
id값을 사용해서 체크박스별로 완벽하게 구분을 지어줘 보자.

<div>
  {data?.fetchBoards.map(el => (
  <div key={el.id}>
    <span>
      <input type="checkbox" />
    </span>
    <span style={myStyles}>{el.id}</span>
    <span style={{margin:"15px", padding: "0px"}}>{el.title}</span> 
    <span style={{margin:"15px"}}>{el.writer}</span>
    <span>
      <button id={el.id} onClick={onClickDelete}>
        삭제하기
      </button>
    </span>
  </div>
  ))}
</div>

map 각각에 id 값을 사용해서 key를 만들어주면

체크박스도 같이 삭제되는걸 알 수 있다.

key를 사용할때 주의할점

map에는 index가 들어옴.

그럼 index는 0번부터 나오고 겹치는게 없는데
이걸 사용해서 key로 주면 되지 않을까? 하는데
index를 사용하면 체크박스가 삭제되지 않음

이유는 index는 값을 삭제하면 새로 그려지면서 다시 index를 앞부터 채워넣게되면서
해당 체크박스의 index가 유지되고 있다고 생각하여 제대로 삭제가 되지 않음.