인프런 커뮤니티 질문&답변

답글 확인을 못하신 거 같아서 다시 답변 답니다! ㅜㅠ

이미 왜 안되는지 고치려고 시도를 많이 했는데 안되고 있는 상황이라 설명을 코드로 해주시면 감사하겠습니다. 현재 말씀주신대로 해봤는데 해당 화면이 출력되고 전체 체크박스가 체크됩니다.

export default function FetchDeleteProduct(){
  const [deleteBoard] = useMutation(DELETE_PRODUCT)
  const {data} = useQuery(FETCH_PRODUCTS)
  console.log(data?.fetchProducts)

  const [checking, setChecking] = useState(false)
  const onClickDelete = async (event) => {
    if(document.getElementById("check")) {
      setChecking(true)
      await deleteBoard({
        variables : {
          productId: event.target.id
        },
        refetchQueries:[{query:FETCH_PRODUCTS}]
      })
    }
  }

  return (
    <>
      {data?.fetchProducts.map((el) => 
        <Row key={el._id}>
          <Column>
            <input type="checkbox" id="check" checked={!checking}/>
          </Column>
          <Column>{el._id}</Column>
          <Column>{el.seller}</Column>
          <Column>{el.name}</Column>
          <Column>{el.price}</Column>
          <Column>
            <button id={el._id} onClick={onClickDelete}>삭제</button>
          </Column>
        </Row>
      )}
    </>
  )
}

안녕하세요 현정님!

input 값에 id를 제거해보시겠어요??

여전히 페이지에 차이가 없습니다. 페이지는 전체 체크박스에 체크가 된 상태로 렌더링되는 상황이며 체크 자체가 풀리지도 않습니다.

<input type="checkbox" />까지만 적어주시고 한번 다시 렌더링 해보시겠어요?

체크 표시 기능에 문제는 없으나 삭제 버튼을 눌렀을 때 정상적으로 내용이 사라지지 않습니다. 코드 중 console.log(data?.fetchProducts) 에선 undefined가 출력됩니다. 그리고 현재 체크 표시 버튼을 누르면 원래 비활성화되었던 삭제 버튼을 누를 수 있개 활성화되게 코드를 구현시켜야 합니다.

체크표시에 문제가 없다면, onClickDelete함수를 바꿔 주셔야 합니다.

if 문을 삭제하고 mutation이 실행될 수 있도록 해주세요.
id를 삭제했으니 if문의 조건에서 false가 떠 아래 mutation이 작동하지 않는 것 입니다.

체크표에 굳이 state를 사용할 필요 없으며, id를 지웠으니 document 를 사용하지 않아도 됩니다.
그리고 variables를 보내주실때 넘겨주는 id값을 Number로 감싸서 넘겨주세요.

해당 과제가 어려우시다면 강의를 한번 더 보고 진행하시는걸 추천 드립니다!

이런 방식으로 작성하였더니 체크 여부에 따라서 버튼 활성화 여부가 달라지는 게 구현됩니다! 그런데 하나의 체크에 모든 버튼이 활성화/비활성화해서 el_.id 값으로 getElementbyId하고 싶은데 혹시 el._id의 값은 어떻게 가져오나요? onClickChange의 코드를 document.getElementById(event.target.id).disabled = checking으로 바꾸면 Unhandled Runtime ErrorTypeError: Cannot set properties of null (setting 'disabled')

오류가 뜹니다.

import {useQuery, gql, useMutation} from '@apollo/client'
import styled from '@emotion/styled'
import { useState } from 'react'

const FETCH_PRODUCTS = gql`
  query fetchProducts{
    fetchProducts{
      _id
      seller
      name
      price
    }
  }
`
const DELETE_PRODUCT = gql`
  mutation deleteProduct($productId:ID){
    deleteProduct(productId: $productId){
      message
    }
  }
`
const Row = styled.div`
  display: flex;
`
const Column = styled.div`
  width: 100px;
  border: 1px solid;
`

export default function FetchDeleteProduct(){
  const [deleteBoard] = useMutation(DELETE_PRODUCT)
  const {data} = useQuery(FETCH_PRODUCTS)
  console.log(data?.fetchProducts)

  const [checking, setChecking] = useState(true)
  const onClickDelete = async (event) => {
    setChecking(!checking)
    await deleteBoard({
      variables: { productId: event.target.id },
      refetchQueries: [{query:FETCH_PRODUCTS}]
    })   
  }
  const onClickChange = () => {
    setChecking(!checking)
    document.getElementsByTagName('button').disabled = checking

  }
  return (
    <>
      {data?.fetchProducts.map((el) => 
        <Row key={el._id}>
          <Column>
            <input type="checkbox" onClick={onClickChange} />
          </Column>
          <Column>{el._id}</Column>
          <Column>{el.seller}</Column>
          <Column>{el.name}</Column>
          <Column>{el.price}</Column>
          <Column>
            <button id={el._id} onClick={onClickDelete} disabled={checking}>삭제</button>
          </Column>
        </Row>
      )}
    </>
  )
}

안녕하세요 현정님!
저희는 수업관련 이슈만 핸들링해드리고 있습니다ㅠ
해당 이슈는 저희 수업관련 내용이 아닌 추가적인 내용이므로 따로 핸들링 해드리지 않습니다.
감사합니다.