[strictmode] useEffect가 두번호출되어 두번 acceessToken요청시

로그인안되는 문제!

 

2번 호출됨. 첫 마운트 시 요청은 200을 받지만 두번째 마운트 시 요청은 401에러를 받음.

 

 

 

방법1. main.tsx에서 strictmode 삭제. 젤 쉬운방법. 삭제하면 한번만 요청하기때문에 바로 이슈가 해결된다. 하지만 리액트에서 권장하지 않는 방법. 

 

 

 

방법2. 계속 찾다보면 이 방법이 나온다 그런데 시도해보니 지금 상황에 맞지않음.

[React]useEffect가 2번 호출되는 이유(feat. StrictMode)

각 코드에 1 마운트, 2 응답완료 3 언마운트를 각 콘솔찍어보면 실행순서가

첫 마운트 -> 첫 api 요청 -> 첫 언마운트 -> 첫 언마운트로 인해 첫 api 요청 중단됨 -> 두번째 마운트 -> 두번째 api 요청 -> 두번째 응답받음
.'. 여러번의 api 요청 중 최신 요청만이 유효하다. 그런데 우리는 access 토큰을 받기위한 요청을 하고, 첫번째 요청에서만 200을 받기에 이방법이 맞지 않음.

 

 

 

방법3. 플래그 변수 사용.

strictmodet사용시 두번 마운트되고 두번 api 요청되는것을 막을 수없음

기존 코드: access 토큰 요청할때마다 로그인 성공/실패 판단.

- api 응답시 then, catch에서 then(로그인 성공)시 메인 리다이렉션으로, catch시 alert 띄우고 로그인페이지로 리다이렉션함

- 이 경우 성공시와 실패시 결과가 모두 실행됨.

 

해당 페이지는 카카오 access 토큰을 받아와서 로그인처리 또는 로그인 실패처리를 위한 페이지임.

코드 수정: access 토큰 요청 -> 성공시에만 데이터 저장. 요청여부를 플래그 변수로 관리 -> 요청여부가 true일때만 성공/실패 판단

성공시에만 데이터를 저장하기 때문에 두번째 요청의 401 에러는 무시됨

const navigate = useNavigate()
  const [userInfo, setUserInfo] = useAtom(userInfoAtom)
  const [isRequest, setRequest] = useState(false) // 플래그 변수: 요청 완료 시 true
  

  useEffect(() => { // 기존 코드 그대로 마운트시 api 요청(.'. strictmode 때문에 총 두번 실행됨
    console.debug('마운트')
    const params = new URL(document.location.toString()).searchParams
    const code = params.get('code')
    const config = {
      method: 'get',
      url: '/web-server/auth/login',
      headers: {
        'Content-Type': 'application/json',
      },
      params: { code, social: 'kakao' },
    }
    console.debug('실행')
    axios(config)
      .then((res: any) => { // 요청 성공시 토큰 저장
        console.debug(res)
        setUserInfo({
          accessToken: res.data.accessToken,
          userName: res.data.userName,
          id: res.data.id,
        })
      })
      .catch((err: any) => {
        console.debug(err)
        // setUserInfo에 null을 저장하던 코드 삭제
      })
      .then(() => {
        setRequest(true) // 요청여부: true로 변경
      })
  }, [])

  useEffect(() => { // 플래그 상태에 변화가 생길때 실행
    console.debug('플래그 상태 변함', isRequest)
    if (isRequest) { // 요청완료 시,
      if (userInfo.accessToken) { // 토큰이 있을때 메인으로 리다이렉션
        navigate('/')
      } else { // 토큰이 없을땐 로그인페이지로 리다이렉션
        alert('로그인에 실패하였습니다.')
        navigate('/login')
      }
    }
  }, [isRequest])