[React] store 사용하지 않고 페이지 이동할 때 정보 저장하는 법(graphQL 사용, useNavigate, useLocation 활용)

728x90

안녕하세요!

저는 오늘은 Redux store를 사용하지 않았을 때

정보를 저장해서 다음 페이지에 보내는 법에 대해 고민을 하는 시간을 가졌습니다.

제가 지금 graphQL을 사용하여 구현중인데,

익숙한 Redux를 사용하지 않으니 아주 간단한 기능에서부터 헷갈리는 것들이 있더라구요.

오늘은 그 중,

store로 데이터를 저장하지 않았을 때의 상황에서

페이지를 이동할 경우 어떻게 정보를 보낼 수 있는지에 대해 기록하려고 합니다.

1️⃣ useState로 state 관리하기

  const [nameValue, setNameValue] = useState<string>(``);

state관리하는 것까지는 간단한 과정입니다.

2️⃣ input 스타일링

<Input
  onChange={onChangeNameInput}
  value={nameValue}
  placeholder="이름을 입력해 주세요."
  height="56px"
  border="2px solid #d1d8dd"
  borderRadius="4px"
  focusBorderColor="black"
/>

당연한 거지만, 시작하시는 단계의 계신 분들은 위 내용도 그대로 따라하시는 경우들이 많아서

input은 각자의 스타일에 맞게 스타일링만 하시면 되고

onChange, value만 맞춰서 따라해주시면 됩니다!

3️⃣ onChange 이벤트

const onChangeNameInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
	setNameValue(e.target.value);
}, []);

이렇게 하면, input의 value 값이 바뀔 때마다 nameValue state에 저장되게 됩니다.

4️⃣ 다음으로 넘어가는 버튼

<button
	onClick={onClickNextButton>
>
	다음 페이지 이동 버튼
</button>

간단하게 이런 식으로 구현했다고 했을 때,

5️⃣ useNavigate 호출 + 페이지 이동 구현

const navigate = useNavigate(); // useNavigate 사용

const onClickNextButton = useCallback(() => {
	navigate('/next-page');
}, [])

이렇게 코드를 작성해서

navigate를 사용하여 page를 이동해 줍니다.

navigate안의 /next-page는 미리 만들어 놓은 라우터 연결 페이지입니다.

6️⃣ 다음 페이지 이동할 때 state 보내기

useNavigate에는 state를 보낼 수 있는 기능이 있습니다.

  const onClickNextButton = useCallback(() => {
    navigate(`/next-page`, {
      state: {
        name: nameValue, //state 추가
      },
    });
  }, [nameValue, navigate]);

이렇게 하면, next-page로 이동될 때, state가 넘어가게 됩니다.

7️⃣ useLocation 사용하기

이제 next-page에 해당하는 컴포넌트로 이동을 해서

const location = useLocation();
const { name } = location.state;

useLocation을 사용하여 location.state에 있는 name을 꺼내서 사용해주면

지난 페이지에서 저장된 내용이 넘어가게 됩니다.

👌 에러가 날 때?

Uncaught TypeError: Cannot destructure property 'name' of 'location.state' as it is null.

만약 이런 에러가 난다면,

이전 페이지에서 value를 공백으로 보낸 에러일 가능성이 높습니다.

‼️ input을 작성하지 않거나 공백일 경우

1. 데이터를 보내지 않도록 버튼 이벤트 함수에 기능을 추가하거나,2. 또는, 다음 컴포넌트에서 useLocation을 사용할 때,

const { nameValue, accountId } = location.state || {};

이렇게 처리해주면, 에러가 없이 작동됩니다.