리액트 mbti앱 useEffect 와 콘솔 각각의 출력 비교 [자신감up 실습18]

정리

1. 훅은 컴포넌트의 최상위 레벨에서만 호출될 수 있으며, 조건문, 반복문, 중첩된 함수 내부에서는 호출할 수 없습니다.

2. useEffect의 의존성 배열값은 상태함수보단, 변수로 하는게 일반적입니다.

---

 

그렇다 버튼을 누르면 아니다 출력.

아니다 버튼을 누르면 그렇다 출력.

 

의도와는 다르게 반대로 출력된다. 

 

 

현재 코드에서 handleOptionChange 함수 내에서 setSelectedOption(e.target.value)을 호출한 직후에 console.log(selectedOption)를 사용하면 예상과 다른 결과가 출력될 수 있습니다.

 

이는 setSelectedOption 함수가 상태를 비동기적으로 업데이트하기 때문입니다. 즉, 상태가 설정된 직후에 바로 console.log를 호출해도, 상태 업데이트가 완료되기 전이기 때문에 이전 상태값을 출력하게 됩니다.

 

 

이 문제를 해결하기 위해서는 selectedOption 상태의 변경을 console.log로 직접 확인하려고 시도하는 대신, 상태 변경이 반영된 이후의 결과를 확인할 다른 방법을 사용해야 합니다. 예를 들어, 상태가 업데이트된 후의 값을 보고 싶다면, React의 useEffect 훅을 사용하여 selectedOption 상태의 변화를 감지하고 그에 따른 로그를 출력할 수 있습니다.

 

현재 코드

function Question({ question, options, onAnswer }) {

  const [selectedOption, setSelectedOption] = useState("");

  //다음문제로 넘어가기 함수

  const handleNextQuestion = () => {

    if (selectedOption === "그렇다.") {

      onAnswer(question.YES);

    } else onAnswer(question.No);

    console.log(selectedOption === "그렇다.");

    console.log(options);

    console.log(question.question);

    console.log(question.YES);

    console.log(question.No);

  };

  const handleOptionChange = (e) => {

    setSelectedOption(e.target.value);

    console.log(selectedOption);

  };

---

1. 훅은 컴포넌트의 최상위 레벨에서만 호출 (콘솔 의도대로 찍기)

 

useEffect를 통해서 

console을 찍어보면 된다. 하지만 hook은 최상위 레벨에서만 호출 가능.

 

function Question({ question, options, onAnswer }) {

  const [selectedOption, setSelectedOption] = useState("");

  useEffect(() => {

    console.log(selectedOption); // 상태 업데이트 후의 값을 로그로 출력

  }, [selectedOption]); // selectedOption이 변경될 때마다 이 useEffect가 실행됩니다.

  //다음문제로 넘어가기 함수

  const handleNextQuestion = () => {

    if (selectedOption === "그렇다.") {

      onAnswer(question.YES);

    } else onAnswer(question.No);

    console.log(selectedOption === "그렇다.");

    console.log(options);

    console.log(question.question);

    console.log(question.YES);

    console.log(question.No);

  };

  const handleOptionChange = (e) => {

    setSelectedOption(e.target.value);

  };

 

 

React 훅은 컴포넌트의 최상위 레벨에서만 호출될 수 있으며, 조건문, 반복문, 중첩된 함수 내부에서는 호출할 수 없습니다. 즉, handleOptionChange 함수 내부에서 useEffect를 호출하는 것은 React의 훅 사용 규칙을 위반하는 것입니다.

 

---

출력이 잘되는 모습

---

2. useEffect의 의존성 배열값은 상태함수보단, 변수로 하는게 일반적

 

콘솔을 다른 변수로  살펴보니 비동기 반영이 늦어서 *가 붙어있는 새로운 선택값이 배열에 반영 안된 모습을.

아랫 줄에는 useEffect를 통해서 배열에 반영된 상태를 확인할 수 있다.

 

아래처럼 useEffect의 의존성 배열값은 상태함수보단, 변수로 하는게 일반적.

useEffect(() => {

    console.log(answers);

  }, [answers]);

  //답변을 받아서 저장해주는 함수

  const handleAnswer = (answer) => {

    setAnswers([...answers, answer]);

    console.log(answers, answer + "*");

---

mbti 유형 분석결과