구현 할 것

• 하나만 고를 수 있는 질문에서 응답을 선택시 질문 카드가 바로 넘어가게끔
• 다중 선택 가능한 질문에서 응답 선택시 질문 카드가 넘어가지 않아야함
  • 이 때 최소 하나 이상 선택해야 다음 카드로 넘어갈 수 있는 버튼이 활성화

// components/tea-test/QuestionProvider.tsx
// 1
useEffect(() => {
    setDisableNext(
      !checkGoNext(answerList, questionNumber, questions.length - 1)
    );
    setDisablePrev(!checkGoPrev(questionNumber));
  }, [questionNumber]);

// 2
useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false;
    } else {
      const newAnswerList = answerList.slice();
      newAnswerList.splice(questionNumber, 1, answer.choice);
      setAnswerList(newAnswerList);
    }
  }, [answer]);

// 3
useEffect(() => {
    if (answer.multiChoicable === false) nextQuestion();
    else
      setDisableNext(
        !checkGoNext(answerList, questionNumber, questions.length - 1)
      );
  }, [answerList]);

1. 질문 번호가 바뀔 때마다 다음 질문과 이전 질문 넘어가기 버튼 활성화를 체크함
2. Question 컴포넌트에 넘긴 setAnswer를 통해 갱신된 answer를 감시함
   • 갱신되면 새로운 answer로 수정한 버전의 새로운 answerList를 만들고 set
3. answerList의 변경을 감시
   • 방금 받은 답변의 질문이 다중 선택이 불가하면 바로 다음 질문으로 이동
   • 다중 선택이 가능하면 다음질문 넘어가기 버튼을 활성화할지 체크하고 활성화

// components/tea-test/QuestionCard.tsx
// 질문 카드에서 선택지를 클릭하는 액션 함수
const onClickChoice = (
    questionNumber: number,
    clickedChoice: string,
    wasSelected: boolean
  ) => {
    if (!multiChoicable) {
      setAnswer({
        questionNumber,
        choice: [clickedChoice],
        multiChoicable: false,
      });
      setSelectedChoiceList([clickedChoice]);
    } else {
      ...

• QusetionProvider컴포넌트의 setAnswer를 props로 전달 받음
• 선택지 클릭 이벤트 발생시 setAnswer함수 실행해 부모 컴포넌트 QuestionProvider의 상태를 업데이트

issues

• QuestionCard가 QuestionProvider의 setAnswer함수를 props로 받는데, 이러면 의존성 높아지니까 재사용이 어렵지 않을까
  • 자식 컴포넌트에게 useState set함수를 넘기는 건 지양해야되는 건가?
  • 자식 컴포넌트의 변화를 부모 컴포넌트로 전달 하면서도 컴포넌트화를 잘 할 수있는 방법 찾기
• QuestionProvider에서 useEffect의 dependancy를 지정할 떄 answer를 감시하고 있는 useEffect에서 answerList가 없을 때도 새로 생성하는 상황 발생
  • useRef를 이용해 최초에 렌더링될 때는 무시
  • 이 때 strict 모드를 꺼야 정상 작동함