220611 프론트엔드 부트캠프 32일차 : 주말,

 

 어제 쓰던게 날아가서 허무하다... 그때그때 오류 잡은 거랑 그런 것도 다 메모해놨었는데 ㅠ ㅠ 대체 어디간거야?!

정말 예민함이 극에 달한 것 같다. 별거아닌 일에도 슬프고 서럽넹 헐 아니네 저장되어있네?! 갑자기 기분이 좋아졌다 ㅎ ㅎ ㅎ

 

  
 const mbti = newScore.reduce(
        (acc, cur) =>
          acc +
          (cur.score >= 2 ? cur.id.substring(0, 1) : cur.id.substring(1, 2)),
        ""
      );
      console.log(mbti);
     navigate({
     	pathname: "/result",
        search: `?${createSearchParams({
        	mbti: mbti,
        })}`
     });
 
 
 
 const mbti = newScore.reduce(
        (acc, cur) =>
          acc +
          (cur.score >= 2 ? cur.id.substring(0, 1) : cur.id.substring(1, 2)),
        ""
      );
      console.log(mbti);
      router.push(`/test/result/${mbti}`);

강의에서는 navigate를 이용하는 방식으로 하셨고, 나는 router 이용해서 했어서 밑에처럼 해줬다. 

새로운 라이브러리를 써보는 것도 나쁘진 않았을 것 같은데, 복습 돼서 좋았다! 

 

navigate를 쓰는 방식에선 searchParams 을 이용해서 `mbti`를 가져온다. 

 

그리고 결과정보들에서 정보를 가져오는 법,

useEffect를 통해서 의존성 배열 안에 mbti를 넣고, find() 함수를 이용해서 resultData에 결과 정보들을 넣어준다.

 

// router이용해서 결과 정보 가져오기
const router = useRouter();

  const mbti = router?.query.mbti;
  const [resultData, setResultData] = useState({});
  useEffect(() => {
    const result = ResultData.find((s) => s.best === mbti);
    setResultData(result);
  }, [mbti]);

boardDetail때 어떻게 했는지 생각해보니까 할 수 있어서 뿌듯했다...! navigate랑 차이점이 뭔지도 알아보면 좋을 것 같당...(까먹을 것 같지만)