리액트에서 쿼리 스트링, 파라미터로 궁금한게 있습니다!

Question

안녕하세요.제가 리액트로 쿼리스트링이 이해가 가지 않아 로직을 구현하지 못하고 있어 이렇게 질문 남겨봅니다.체크박스 인풋을 이용하여 컨텐츠를 불러오고 싶은데..체크박스가 여러개이니 파라미터도 여러개입니다 ㅠ/review 에서 조건이 여러개 붙는다면/review?floor&#61;1&seat&#61;1 이런식으로 들어가야 합니다.또 조건 하나를 해제했을 때 /review?seat&#61;1 이런식으로 바뀌어야하구요 ㅠㅠ키, 값을 어떻게 넣다 뺐다 할 수 있나요??체크박스의 checked 되어있는 친구를 useState로 배열안에 값을 추가하고 그걸 파라미터로 넣어야하나요 ㅠㅠ? 아이디어가 부족합니다 조언 해주실 선배님이 계실까요?

컾희 · Answer

백엔드로 날릴 때 체크 된 애들만 붙여줘야죠?

DeadWhale · Answer

바로 생각나는 방식은 onsubmit 활용해서 전송 할때 a 태그 링크는 추가하는 방식이네요 아니면 checked 이벤트 추가해도 되고요

개발하는 뚠뚠이 · Answer

let url 해두고 체크박스 조건에 따라서 if문으로 url 설정해주면 안돼나요?아니면 &#96; &#96;이용해서 안에서 조건으로 url 완성해준다거나

페코옹 · Answer

이렇게 해보세요import React, { useEffect } from "react"; import { BrowserRouter as Router, useSearchParams, createSearchParams } from "react-router-dom"; import { useNavigate } from "react-router-dom"; const App = () => { const [params] = useSearchParams(); const query = Object.fromEntries([...params]); const navigate = useNavigate(); useEffect(() => { console.log("여기서 데이터 다운로드", query); }, [query]); const handleCheck = (e) => { const { name, checked } = e.target; const param = createSearchParams({ ...query, [name]: checked ? "Y" : "N" }); navigate({ pathname: "/", search: `?${param}` }); }; return (

); };

리액트에서 쿼리 스트링, 파라미터로 궁금한게 있습니다!

4개의 답변

Q&A 목록