결과 로직 완성하기 (feat. map과 reduce, 변수 넘겨주기)

1. Question.js 파일에서 계산한 값을 토대로 MBTI 도출하는 식 작성

setTotalScore를 이용하지 않고 newScore 이용 및 reduce 함수 사용

현재 배열 객체의 스코어가 2보다 크거나 같으면 아이디의 앞글자를, 아니면 뒷글자를 출력해 누적값에 더하는 형태

초기값은 빈 칸("")으로

 

result 페이지의 경우 새로운 component이므로 변수의 값을 넘겨줄 필요가 있으므로 search 기능 활용

createSearchParams함수를 업데이트 되면서 사용할 수 있게 됨

기존에 값을 넘겼을 때는 result page로 가서 http://localhost:3000/result?mbti=ESTJ와 같은 주소를 query param이라는 라이브러리를 이용하여 식을 사용한 string으로 뽑아서 사용했는데 업데이트 되면서 라이브러리 사용 안해도 뽑아올 수 있게 됨

    if (QuestionData.length!==questionNo+1) {
      setQuestionNo(questionNo+1);
    } else {
      const mbti=newScore.reduce(
        (acc,curr)=> {
          return acc+(curr.score>=2 ? curr.id.substring(0,1) : curr.id.substring(1,2))
        },""
      );

      navigate({
        pathname: '/result',
        search: `?${createSearchParams({
          mbti: mbti,
        })}`
      });
    }

 

(+) map과 reduce 함수

map: 반복문을 돌면서 배열안에 요소를 1대1로 짝지어서 찍어내므로 어떻게 짝지어 줄 것인가에 대한 함수를 메서드의 인자로 넣어줌

//map 함수의 기본 틀
배열.map((element, index, arr) => {
  return element
});

//reduce 함수의 기본 틀 (acc는 누적값, cur은 초기값을 의미함)
배열.reduce((acc,cur,index,element) => {
  return 결과
}, 초기값);

 

 

2. MBTI 값과 실제 resultdata와 매칭해서 보여주기

url에 있는 mbti string을 받아오기 위해서는 SearchParams의 경우 뒤에 입력한 값이 파라미터임을 기억

const [searchParams]=useSearchParams();
const mbti=searchParams.get('mbti');

실제 console.log를 해보면 http://localhost:3000/result?mbti=ESTJ 중에서 ESTJ만을 가져오는 결과를 보여줌

'mbti'를 get하는데, search 내부에서 정의해준 것임을 의미

 

진입했을 시점에 결과 데이터를 뽑아내야 하므로 useEffect 사용

dependency에는 mbti가 들어온 시점에 계산을 해야하기 때문에 mbti를 넣어줌

s.best가 mbti랑 같을 때 객체로 return

resultData가 우리가 mbti를 구한 시점에 다시 resultData.js 속에서 best라는 값과 매칭해서 같은 값이 있을 때 객체를 반환

반환된 객체가 result에 저장이 되고 반환된 객체를 setResultData라는 함수를 통해 resultData에 저장해줄 것

const Result = () => {
  const navigate=useNavigate();
  const [searchParams]=useSearchParams();
  const mbti=searchParams.get('mbti');
  const [resultData, setResultData]=React.useState({});

  React.useEffect(()=>{
    const result=ResultData.find((s)=>s.best===mbti)
    setResultData(result);
  },[mbti])

  return(
    <Wrapper>
      <Header>MBTI 테스트</Header>
        <Contents>
        <Title>결과 보기</Title>
        <LogoImage>
          <img src={resultData.image} alt='mbti' width={350} />
        </LogoImage>
        <Desc>당신과 제일 잘 맞는 MBTI는 {resultData.name}입니다.</Desc>
        <Button style={{fontFamily: "DNFBitBitTTF"}} onClick={()=>navigate("/")}>
          테스트 다시하기
        </Button>
      </Contents>
    </Wrapper>
  )
}