TIL - React에서 useState를 사용할 때 호출이 여러 번 발생

React에서 Server로 요청을 보내는데 같은 요청이 여러 번 발생하는 문제가 생겼다.

strictmode는 개발 시작 단계에 제거한 상태라 이 문제는 아니었다.

 

 

useEffect를 사용해 특정 변수의 값이 변경되면 정해진 코드를 수행하도록 작성했는데 이 부분이 문제였다.

 

  useEffect(() => {
    console.log("authCode 변경됨");
    console.log("tokenState: ", tokenState)

	// ...

      setTokenState(true);
    });
  }, [authCode]);

  useEffect(() => {
    console.log("tokenState 변경됨")
    console.log("tokenState: ", tokenState)

	// ...
    
  }, [tokenState]);

 

내가 생각한 실행 순서
1. 카카오 로그인 버튼을 누른다.
2. 쿼리 파라미터에서 code의 값을 authCode에 저장한다.
3. authCode의 값이 변경되어 useEffect가 실행된다. - 여기서 tokenState의 값을 변경
4. tokenState의 값이 변경되어 useEffect가 실행된다.

* 비동기 함수를 작성하고 동기식으로 생각해서 문제 발생 *

 

실제 실행 순서

1. 카카오 로그인 버튼을 누른다.

2. 컴포넌트가 마운트 되면서 각 useEffect가 실행된다.

    1. "authCode 변경됨", "tokenState:  false" 메시지가 출력된다.

    2. 비동기 함수 getAccessToken이 실행된다.

    3. "tokenState 변경됨", "tokenState:  false" 메시지가 출력된다.

    4. 비동기 함수 getJwtToken이 실행된다.

    5. 비동기 함수 getAccessToken, getJwtToken의 값이 반환된다.

    6. setTokenState()가 실행되며 tokenState값이 변경된다.

    7. 변경된 tokenState의 값을 감지하여 useEffect가 실행된다.

    8. "tokenState 변경됨", "tokenState:  false" 메시지가 출력된다.    

 

코드 작성 전 생각하기! 코드 작성 후 점검하기! 디버그 모드로 다시 한 번 점검하기!