url Query로 컴포넌트 state 관리하기

 

페이지 안에 탭이 있고, 탭은 tabIndex라는 상태로 관리된다.

url을 통해 페이지로 접속할 때 특정 탭으로 바로 연결되도록 하고 싶다.

 

 

✔️ 필요성

페이지 안에 탭이 있고, 탭은 tabIndex라는 상태로 관리된다.

url을 통해 페이지로 접속할 때 특정 탭으로 바로 연결되도록 하고 싶다.

 

 

 

✔️ 문제 해결

useRouter()를 통해서 query를 가져오고 query의 tabIndex 값을 받아서 state를 변경해준다

  const [tabIndex, setTabIndex] = useState<number>(0);
  const ref = useRef<any>(null);
  const { isFallback, query } = useRouter();
  
  useEffect(() => {
    const { tabIndex } = query ?? {};
    if ([0, 1].includes(Number(tabIndex))) setTabIndex(Number(tabIndex));
  }, [query?.tabIndex]);

 

 

 

✔️ 활용

아래와 같은 주소로 페이지에 접속하면 처음 랜딩할 때부터 tabIndex가 1로 시작한다.

https://www.thisisurl.com/?tabIndex=1