클릭시 ObjectId 백엔드 전송

const handleRowClick = async (id) => {
    try {
      console.log(id);
      const response = await axios.post(
        `http://localhost:4000/wallet/money/${id}`,
        { id },
        {
          headers: { "Content-Type": "application/json" },
        }
      );
      console.log(response.data);
    } catch (err) {
      console.error(err);
    }
  };

row를 클릭하면 params를 타고 { id }가 백엔드로 전송되도록 했다. 이 과정에서 params를 통해 전송하는 것은 연습만 해봤지만 실제로는 처음 해봐서 상당히 애를 먹었다.

최근 결제한 Code Guru의 도움 없이는 많은 자료를 찾으면서 상당히 애먹었을 것 같다.. GPT성능이 이렇게 좋아서 안쓰는 것은 바보라고 생각한다. 이제는 웹 개발을 위해 GPT를 잘 사용하는 방법을 알아야 하는 시대가 오는 것 같다.

클릭할 시 나오는 추출한 {id} 객체를 axios.post요청을 통해 백엔드로 보낸다. 그 후 response.data를 통해 id를 통해서 찾은 데이터 객체를 출력하도록 한다.

<TableRow
  hover
  role="checkbox"
  tabIndex={-1}
  key={row._id}
  onClick={() => handleRowClick(row._id)}
>
  {columns.map((column) => {
    const value = row[column.id];
    return (
      <TableCell key={column.id} align={column.align}>
        {value}
      </TableCell>
    );
  })}
</TableRow>

위에서 작성한 handleRowClick()를 OnClick={() => handleRowClick(row._id)}에 넣어주고, map()을 하기 위해 사용했던 row._id를 이용해서 handleRowClick()에 넣어준다.

router.post("/money/:id", async (req, res) => {
  try {
    const { id } = req.params;
    const ObjectId = new mongoose.Types.ObjectId(id);
    const wallet = await Wallet.findById(ObjectId);
    res.json(wallet);
  } catch (err) {
    console.error(err);
  }
});

프론트엔드에서 보낸 params를 id라는 변수로 담아준다. 그 뒤로 ObjectId상수를 만들어서 mongoose.Types.ObjectId를 넣어주면 된다. 원래는 { _id: new ObjectId(id) } 이런 식으로 사용했는데 mongoose를 사용하면 mongoose.Types.ObjectId를 넣어주면 문제를 해결할 수 있다. 그리고 새로운 객체를 담는 것이니 new mongoose.Types.ObjectId라고 적어야 에러를 방지할 수 있다. (나는 많이 나서 여러번 적음..)