[React] 새 창에서 동일한 세팅 값 유지하도록 하기 (URL query string 활용)

목표 : 새 창을 열었을 때, 기존에 보던 화면과 동일한 세팅 값을 가진 화면을 띄워야 한다.
기능 : 현재 발생한 알람을 보는 페이지에서 '새 창 열기' 버튼을 눌렀을 때, 기존에 사용자가 세팅해 놓았던 값들을 그대로 유지한 새 창이 열리도록 한다.
방법 : 기존에 사용자가 세팅한 값을 URL query string으로 보내고, 그 값을 가져와 화면을 그린다.

 

URL query string 을 가져올 때

- Next.js 에서는 useRouter 를 사용해서 (비교적) 간단하게 가져올 수 있지만

- React 에서는 URL 을 디코딩해서 JSON 문자열로 변환하는 과정이 필요했다.

 

기존에 사용자가 세팅할 수 있는 값들이 꽤 많아서 객체 형태로 보내야 했다.

세팅할 수 있는 값은 아래와 같다.

{
    pageNumber: 1,
    pagePerSize: 30,
    sortFieldSets: [],
    gridFilters: [],
    tagFilters: [],
    timeFilter: {
        startTime: 0,
        endTime: 0,
        mode: '',
    },
    arguments: {
        alarmSeverity: {
            CRITICAL: true,
            FATAL: true,
            INFO: true,
            MAJOR: true,
            MINOR: true,
            NORMAL: true,
        },
        event: true,
        maintenance: true,
    },
}

 

 

Next.js 에서 URL query string 가져오기

import {useRouter} from "next/router"

const MovieDetail = () => {
  const router = useRouter()
  const [movieId, setMovieId] = useState<string>("") 

  useEffect(() => {
    if (router.query.movieId) {
      setMovieId(router.query.movieId as string)
    }
  }, [router.query.movieId])

  useEffect(() => {
    if (movieId !== '') {}
  },[movieId])
}

• router.query 의 query ?
  :  dynamic route parameters 를 포함하여 객체로 구문 분석된 쿼리 문자열입니다. 페이지가 서버 측 렌더링을 사용하지 않는 경우 미리 렌더링하는 동안 빈 객체가 됩니다. 기본값은 {} 

 

---

 

React 에서 URL query string 세팅하기

const openNewPage = () => {
    const queryString = encodeURIComponent(JSON.stringify(alarmParam))

    window.open(`/new-page/viewer?referrer=alarm-view&${queryString}`)
}

• 새 창 열기 버튼을 클릭했을 때, openNewPage 함수 실행
• JSON 문자열로 변환된 alarmParam 을 인코딩
• window.open 으로 인코딩한 queryString 을 URL 에 넣는다

 

React 에서 URL query string 가져오기

const queryStringToObject = () => {
    if (!window.location.href) return

    const decodedUrl = decodeURIComponent(window.location.href)
    const match = decodedUrl.match(/\{.*\}$/)

    if (!match) {
        console.error('JSON string not found in URL')
        return
    }

    const jsonString = match[0]
    let jsonObject

    try {
        jsonObject = JSON.parse(jsonString)
    } catch (error) {
        console.error('Error parsing JSON string:', error)
        return
    }

    return jsonObject
}

• decodeURIComponent : URL을 디코딩하여 JSON 형식의 문자열로 변환
• decodedUrl.match(/\{.*\}$/) : 문자열의 끝에 위치한 중괄호 '{' 로 시작해서 중괄호 '}' 로 끝나는 모든 텍스트를 찾습니다.
  그리곤 URL에서 JSON 형식의 문자열 부분을 추출하여 배열로 반환합니다.
• 결과를 변수 match 에 저장하고, null 또는 undefined 인지 확인합니다.
• 일치하는 부분이 없는 경우 오류 메시지를 출력하고 return 합니다.
• jsonString 을 파싱할 때 try-catch 블록을 사용하여 JSON 파싱 오류를 처리합니다.
• 객체인 queryStringToObject() 에서 값들을 꺼내서 기존에 사용자가 세팅한 값들을 화면에 세팅합니다.

(해당 코드는 useEffect 로 관리하며, 화면이 렌더링된 후 바로 실행될 수 있도록 하면 된다)

 

 

✅ 더 간단한 방법 (25.01.26)

URL query string 세팅

const openNewPage = () => {
    const queryString = encodeURIComponent(JSON.stringify(activeAlarmParam))

    window.open(
        `/new-page/viewer?referrer=alarm-view&gridParam=${queryString}`,
    )
}

 

URL query string 가져오기

const [searchParams] = useSearchParams()

useEffect(() => {
    if (isNewPage) {
        const gridParam = searchParams.get('gridParam') || ''
        const gridParamObj = JSON.parse(gridParam)
        // ...나머지 로직
    }
}, [searchParams])

 

• react-router 의 useSearchParams 훅을 사용하면 된다.
• useSearchParams는 URL의 모든 쿼리 파라미터를 파싱하여 객체처럼 관리한다.
• searchParams.get('키') 를 사용하여 원하는 파라미터 값을 가져올 수 있다.
• useSearchParams 자체는 쿼리 파라미터를 파싱하여 키-값 으로 제공하지만, 각 값은 여전히 문자열로 취급된다
• 따라서, JSON 형태의 문자열을 객체로 사용하려면 파싱은 필수적이다.