✅ Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

[jaynamm]

QnA 게시판에서 하나의 게시글의 제목을 클릭해서 들어가면 다음과 같이 에러가 발생한다.

동작하는 과정은 아래와 같다.

Qna.js

제목을 클릭하면 onClick() 이벤트 함수가 실행된다.

<table>
    <th>번호</th>
    <th>제목</th>
    <th>작성자</th>
    <th>생성일</th>
    {questions.map((question) => (    
        <tr>
            <td>{question.id}</td>
            <td onClick={() => {onClickQnaViewHandler(question.id)}}>{question.title}</td>
            <td>{question.author}</td>
            <td>{question.createdDate}</td>
        </tr>
    ))}
</table>

• onClick() 함수
  questionId 값을 가지고 /qna/view 로 이동한다.

const onClickQnaViewHandler = (questionId) => {
    navigate(`/qna/view/${questionId}`, {
        state: questionId
    });
}

QnaView.js

questionId 를 가져와서 API 를 이용해 해당 질문 글을 가져온다.

const location = useLocation();
const getId = location.state;

const [questionId, setQuestionId] = useState("");
const [questionViewData, setQuestionViewData] = useState([]);

setQuestionId(getId);
console.log(questionId);

axios({
    method: "GET",
    url: `/api/qna/question/view/${questionId}`
})
.then((res) => {
    console.log(res.data.question);

    // setQuestionViewData(res.data.question);
})
.catch((err) => {
    console.log(err);
})

일단 동작 과정은 이런데 다시 한번 처음부터 생각해봐야겠다.

[jaynamm]

해당 에러에 대해서 찾아보니 어디선가 무한루프가 걸리기 때문에 발생하는 문제라고 한다.
이 부분에 대해서는 re-render 에 대해서 이해가 필요해보인다.

문제 상황

이 부분에서 계속해서 null 값이 출력되었다.
그리고 useState 훅에서 set 이 되지 않아 API 호출이 되지 않았다.

setQuestionId(getId);
console.log(questionId);

계속해서 값을 받아오지 못하니 API 가 호출되지 않아 생기는 문제인 것으로 보여진다.
rendering 이 계속되는 문제는 useEffect 를 사용해서 한번만 호출 되도록 했다.

axios 를 통해 GET 하는 과정에서 useEffect 로 컨트롤 해주면서 반복해서 가져오지 않게 해줘야한다.

수정된 부분 - QnaView.js

일단 아래와 같이 수정해서 정상적으로 데이터를 가져오는 것으로 확인했다.
원인은 아직 찾지 못해서 계속 공부하면서 찾아보는걸로...

const location = useLocation();
const getId = location.state.id;

const [questionViewData, setQuestionViewData] = useState(null);

useEffect(() => {
    console.log(`/api/qna/question/view/${getId}`);

    axios({
        method: "GET",
        url: `/api/qna/question/view/${getId}`,
        headers: {
            "Content-Type": 'application/json'
        }
    })
    .then((res) => {
        console.log(res);

        setQuestionViewData(res.data.question);

        console.log(questionViewData);
    })
    .catch((err) => {
        console.log(err);
    })
},[]);

[KKYHH]

slay