URL따라 구성요소가 달라지게 하기

URL 에 값을 넣고 사용해보자

URL 에 특정한 값을 넣고, 그 값을 이용해서 페이지가 달라지게 하고 싶습니다.

예를들어 사용자에 따라 어떤 Form 을 보여줄지, 해당 Form의 어떤 Version을 보여줄지…

이 부분을 직접 url 에 넣어서 활용하는 거죠.

example.com/examle?formId=123734&mainVersion=168431 과 같이 url 에 해당 정보를 기입하고

프론트 엔드에서는 이 url 의 정보를 받아 변형되도록 해보겠습니다.

어떻게 URL 에 값을 할당할지

URL 에 특정한 값을 넣고, 그 값을 이용해서 페이지가 달라지게 하고 싶습니다.

예를들어 사용자에 따라 어떤 Form 을 보여줄지, 해당 Form의 어떤 Version을 보여줄지…

이 부분을 직접 url 에 넣어서 활용하는 거죠.

example.com/examle?formId=123734&mainVersion=168431 과 같이 url 에 해당 정보를 기입하고

프론트 엔드에서는 이 url 의 정보를 받아 변형되도록 해보겠습니다.

이미 특정한 정보를 전달하는 라우터가 존재한다는 가정으로 진행하겠습니다.

우선 특정한 정보를 어떤 식으로 페이지에 전달하면서 페이지가 이동하게 할 지에 대한 코드입니다.

				
					const handleLogin = async (id, password) => {
    const payload = {
      id,
      password,
    };

    try {
      const response = await fetch("특정한 값을 전달해주는 라우터", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(payload),
      });
      //여기서 {"what_form" : ..., "token":...} 과 같이 필요한 정보를 Key 와 Value 를 통해 data 에 담습니다.
      const data = await response.json(); 

      if (data.success) {

        //what_form 이라는 곳에 전체 form 의 id 를 리스트 식으로 쭉 담았기에 다음과 같은 로직으로 main_form 을 지정합니다.
        const main_form =
          data.what_form && data.what_form.length > 0 ? data.what_form[0] : null;

        //이럼 what_form 내에 요소가 존재하는 경우에는 첫 번째 값을 mian_form 으로, 그렇지 않은 경우 null 이 됩니다. 


        // 기본적으로 version 은 null 로 넣어두되, main_form 값이 할당되면 그것에 따른 version 을 versionMatching 이라는 배열에서 가져옵시다.
        const mainVersion = null;
        if (main_form != "null") {
        const mainVersion = data.versionMatching[main_form];
        } 
          
        // main_form과 mainVersion을 URL에 포함하여 mypage로 이동
        navigate(`/mypage?formId=${main_form}&mainVersion=${mainVersion}`);
      } else {
        console.error("Login failed:", data.message);
        alert("Failed to login: " + data.message);
      }
    } catch (error) {
      alert("An error occurred while attempting to login.");
      console.error("An error occurred during login:", error);
      console.error(error.response ? error.response.data : "No response");
    }
  };

위 코드는 로그인에 성공했을 때, mypage 라는 페이지로 이동을 하되

이때 URL 내부에 main_form 이라는 값과, mainVersion 이라는 값을 할당하며 넘어가게 하는 로직을 가집니다.

할당한 값을 어떻게 페이지에서 가져갈지

위 코드를 통해서 로그인을 한다고 칩시다.

그래도 mypage 라는 페이지에서는 특정한 값이 URL 에 할당되어 있지 않을 겁니다.

할당된 값을 실제로 구현하기 위해서는 mypage 페이지를 수정할 필요가 있습니다.

				
					import { useSearchParams } from "react-router-dom";

다음의 import 문을 통해서 useSearchParams 를 사용해줘야,

정상적으로 URL 에 할당된 값을 사용하고 확인할 수 있습니다.

대충 구조를 그려보자면 아래와 같이 될 겁니다.

				
					const Mypage = () => {
  const [searchParams] = useSearchParams();
  const mainForm = searchParams.get("formId");
  const mainVersion = searchParams.get("mainVersion");

  useEffect(() => {
    console.log("URL에서 가져온 mainForm:", mainForm);
    console.log("URL에서 가져온 mainVersion:", mainVersion);
  }, [mainForm, mainVersion]);

  return (
    <div className="Mypage-section">
      <>
        {mainForm === "null" ? (
          <div className="main-content">
            <p>아직 어떠한 Form 도 가지고 있지 않을 때 이런 문구가 나타난다.</p>
            <Link to="/form생성페이의링크">
              <button>Form 생성 페이지로 이동</button>
            </Link>
          </div>
        ) : (
          <>
        {/* ...실제로 mainFrom 과 mainVersion이 할당되어 있고.
        그것을 활용하여 사용자에게 보여주고 싶은 페이지의 코드.. */}

          </>
        )}
      </>
    </div>
  );
};

export default Mypage;

이제 해당 페이지에서는 URL 에 담긴 값을 활용할 수 있습니다.

mianForm 이 null 이라면 새로운 Form을 생성하라는 문구가,

그렇지 않을 경우에는 정상적으로 사용자에게 보여주고 싶은 페이지가 나타나게끔 할 수 있습니다.