퀴즈 토픽 선택 이후 해당 토픽에 대한 퀴즈 리스트 페이지 구현

Get /topic/{topicId} 해서 받아오는 데이터 형식은 다음과 같습니다.

interface Quiz {
  quizId: number;
  questionOrder: number;
  questionTitle: string;
  difficultyLevel: 'EASY' | 'MEDIUM' | 'HARD';
  isSolved: boolean;
}

interface QuizListResponse {
  quizzes: Quiz[];
}

여기서 문제가 발생했습니다.

퀴즈 리스트 페이지에는 어떤 토픽인지 정보가 적혀있어야 하는데, 해당 토픽에 대한 정보가 존재하지 않습니다.

해당 토픽은, 이전 페이지인 퀴즈 토픽 선택 페이지에 존재합니다.

이에 url state와 location state를 함께 사용해야한다고 판단했습니다.

간단하게, url state는 주소창에 포함되고, location state는 페이지 이동시 전달되는 임시 데이터 입니다.

이에 다음과 같이 페이지 이동시 값을 전달하였습니다.

const handleTopicButtonClick = (topicId: number, topicName: string) => {
    navigate(`/quizList/${topicId}`, { state: { topicName } });
  };

그리고 퀴즈 리스트 페이지에서는 다음과 같이 값을 받아왔습니다.

const { topicId } = useParams<{ topicId: string }>();
const location = useLocation();

const topicName = location.state?.topicName;

이렇게 받아온 topicId는 api 통신 주소에 이용하고, topicName은 주제를 화면에 띄어주는것에 사용하였습니다.

이렇게 함으로써, 굳이 전역 상태 라이브러리를 사용하지 않고도 값을 다음 페이지에서 사용할 수 있었습니다.