ContextAPI & 라우터 관련 오류 처리

세션스토리지에 토큰은 제이슨 형식이어야만 한다

ContextAPI 사용 법

ContextAPI 사용 시 Provider value값을 넘겨주는 부분에서 useMemo 감싸고
상태값과 함수들을 반환해준다
의존성에 상태값과 함수들을 넣어준다

** useEffect를 실행해서 토큰이 있을 때 getUser Api를 호출해 상태를 바꿔줘야 새로고침을 해도 데이터가 유지된다(매번 요청을 하는 것)

부모에게 받은 값이 부모의 상태라면, 자식은 부모의 상태가 바뀌는지 인지하지 못하므로 의존성을 걸어줘야한다

문제 상황


// likeCount 부모 컴포넌트에서 likeCount가 0에서 바뀐다
// 자식은 최종적으로 변화된 값을 초기값으로 사용해야하기 떄문에
// 자식도 변화를 그대로 이어받으려면 자식 컴포넌트 내에서 의존성을 걸어줘야한다

export const LikeToggle = ({ id, isLiked, likeCount, onClick }) => {
  const [state, toggle] = useToggle();
  const [count, setCount] = useState(likeCount);

  useEffect(() => {
    isLiked && toggle();
  }, []);

해결


export const LikeToggle = ({ id, isLiked, likeCount, onClick }) => {
  const [state, toggle] = useToggle();
  const [count, setCount] = useState(0);

  useEffect(() => {
    isLiked && toggle();
    setCount(likeCount);
  }, [likeCount]);

contextApi에 토큰 값을 저장해서 라우터의 리다이렉트의 기준으로 쓸 시, 비동기 상황과 맞물려 제대로 동작하지 않는다 세션에 토큰은 있는데 contextApi의 토큰 변수가 갱신되지 않을 수 있다

⇒ contextApi의 토큰 변수와 세션 스토리지의 토큰 유무를 모두 비교해준다


const getInitialData = async () => {
    const { data } = await getMyInfo(); // 불러오는 시간이 걸린다
    setUserInfo({
      token: sessionStorage.getItem('authorization'),
      username: data.userName,
      userId: data.userId,
      group: data.group,
    });
  };


<Route path="/signup" exact component={SignUpPage}>
          {hasAuth || sessionStorage.getItem('authorization') ? (
            <Redirect
              to={{
                pathname: '/',
                state: {
                  from: '/signup',
                },
              }}
            />
          ) : (
            <SignUpPage />
          )}
        </Route>