[React] location.state 활용해보기

만약 두개의 버튼이 있고, 두개의 버튼 모두 클릭 이벤트로 하나의 페이지로 이동하는데 다른 컴포넌트를 렌더링 해야 할 때는 location.state 활용해서
쉽게 파라미터를 전달 할 수 있다

<Link to='/findAccount' state={{ findId: true }} />
<Link to='/findAccount' state={{ findId: false }} />

위의 Link 태그는 계정찾기 페이지에서 아이디를 찾는 폼이 렌더링 되게끔 하고, 밑의 Link 태그는 비밀번호 찾는 폼이 렌더링 되게끔 한다.

state props 로 boolean 값을 넘겨주면 된다 아주 쉬움.

  const location = useLocation();
  
  const { findId } = location.state as LocationState;
  
  const [tab, setTab] = useState<Tab>(
    findId === false
      ? { id: false, password: true }
      : { id: true, password: false },
  );

그럼 이동한 페이지에서 Link 를 타고온 state 값을 이렇게 받으면 된다.
useLocation hook 으로 state 를 가져오면 된다.

findId 는 boolean 값으로, 조건부 렌더링으로 걸어주기만 하면 끝~~

매번 recoil 먼저 생각나는데 너무 간단한 방법이 있어서 기록 ..