비동기호출 시 useEffect 사용

프로젝트를 하다가 비동기호출을 사용해야됐었는데 

이때 useEffect를 사용했다.

 

useEffect에 대해서 잘 몰랐기 때문에 리액트 공식 문서를 참고했다. 

https://ko.reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React

리액트에서는 비동기 호출 할 때 effect를 발생 시켜서 함수를 실행 할 수 있게끔 해준다.

 

effect 혹은 side effect란

데이터를 가져오고, 구독 설정하고, 수동으로 React 컴포넌트의 DOM을 수정하는 것

 

useEffect가 하는 일은 무엇일까요? useEffect Hook을 이용하여 우리는 React에게 컴포넌트가 렌더링(실행) 이후에 어떤 일을 수행해야하는 지를 말합니다. React는 우리가 넘긴 함수를 기억했다가(이 함수를 ‘effect’라고 부릅니다) DOM 업데이트를 수행한 이후에 불러낼 것입니다. effect를 통해 문서 타이틀을 지정하지만, 이 외에도 데이터를 가져오거나 다른 명령형 API를 불러내는 일도 할 수 있습니다.

useEffect는 렌더링 이후 매번 수행된다.

 

내가하고 있는 프로젝트에서는 로그인 시 카카오에서 인가코드를 받고 그 후에 카카오 api를 호출해서 토큰을 받기 위해서 useEffect를 사용했다.

import React, { useEffect } from 'react';

const Auth = () => {
  const code = new URL(window.location.href).searchParams.get('code');  // 카카오에서 인가받은 코드

  // 비동기호출 -> 함수를 먼가 실행해야하는건데 -> 리액트에서는 이걸 이팩트를 발생시켜서 처리할수있다
  useEffect(() => {
    if (code) {
      kakaoLogin(code);
    }
  }, [code]);