[리액트] useEffect

useEffect 의 필요성

• 리액트 앱은 기본적으로 state가 변경되면 그 컴포넌트를 다시 평가한다.
• 사이드 이펙트는 애플리케이션에서 일어나는 다른 모든 것을 뜻한다.
• 예를 들면 http 리퀘스트를 보내는 것, 또는 브라우저 저장소에 무언가를 저장하는 것이다.
• 이것들은 모두 애플리케이션에서 고려해야 하는 작업이다.
• 예를 들어, 웹 애플리케이션은 대부분 백엔드 서버에 요청을 보낸다.
• 그러나 이러한 작업들은 화면에 무언가를 가져오는 것과는 관련이 없다.
• 즉, 이것들은 리액트를 필요로 하지 않는다.
• 따라서 이것들은 일반적인 컴포넌트 평가의 밖에서 일어나야 한다.
• 그래서, http 리퀘스트를 보내는 코드를 컴포넌트 함수 안에 적으면 state가 변경되어 
• 컴포넌트가 재 평가될 때 마다 계속 실행이 될 것이고 이것은 옳지 않다.
• 따라서 이런 사이드이펙트는 직접적으로 컴포넌트 함수에 들어가서는 안된다.
• 그러므로 사이드이펙트를 정리하는 좋은 도구가 필요하다.
• 리액트에서는 이러한 것을 위해 useEffect훅을 제공한다.

 

useEffect 사용법

• useEffect는 두가지 인자를 받는데, 첫 번째는 함수이다.
• 두 번째 인자는 의존성이다. 이 의존성이 변경될 때 마다 첫 번째 함수가 다시 실행된다.
• 따라서 첫 번째 인자의 함수에 어떤 사이드이펙트 코드를 넣을 수 있다.
• 그러면 그 코드는 지정한 의존성이 변경된 경우에만 실행 될 것이다. (컴포넌트가 다시 렌더링 될때는 실행 x)

 

• 간단한 예로 사용자가 login을 하였다면 isLogin이라는 state에 담긴 정보가 true로 바뀔 것이고 
• 새로고침하면 당연하게도 컴포넌트가 재평가되어 isLogin이라는 state는 다시 기본값인 false로 바뀌어
• 로그인이 풀릴 것이다.
• 이를 위해 useEffect를 사용한다.

 

• 위의 코드에서 사용자가 로그인하면 로컬스토리지에 정보를 저장하고, isLogin을 true로 만든다.
• 이 상태에서 새로고침을 할 경우 로컬스토리지에서 로그인한 정보를 확인하고 정보가 있으면 
• isLogin을 다시 true로 만들고 state가 변경되었으니 컴포넌트는 다시 평가가 될 것 이고 무한 루프에 빠질 수 있다.
• 이를 위해 useEffect를 사용한다.

• 위와 같이 설정해주었을 때 useEffect의 함수는 앱이 처음 실행될 때 한번만 실행이 된다.
• 의존성이 없다가 앱이 실행되면 의존성이 생기고 변하지 않기 때문이다.

 

clean up  함수

• useEffect의 함수에서 첫 번째 함수로는 의존성에 따라 실행되는 함수가 들어간다. 
• 예를 들어, 사용자가 로그인을 할 때 유효성 검사를 하는 함수를 useEffect를 사용해 검사한다고 가정하자.
• 그러면, 의존성에 사용자가 입력할 이메일과 비밀번호가 들어갈 것이고 
• 이 값이 바뀔 때 마다 매번 유효성 검사를 할 것이다. 
• 하지만 이 유효성 검사가 백엔드 서버에 리퀘스트 요청을 보내는 것이라면 너무 비효율적으로 많은 요청을 보낸다.
• 그래서 우리는 사용자의 입력이 끝나고 잠시 대기했다가 보낼 수 있다. (setTimeout 사용)

• 하지만 이 과정 역시 0.5초 딜레이를 줄 뿐 아직 요청은 계속해서 보낸다.
• 이를 해결하기 위해 함수의 두 번째 함수로 clean up함수를 줄 수 있다.
• clean up 함수는 첫 번째의 함수가 실행되기 전에 실행되는 함수이다.

• 이와 같이 clean up 함수에 기존의 요청을 지우는 clearTimeout을 넣어주면, clean up 함수가 먼저 실행되므로
• 기존의 요청들은 없어지고 항상 마지막 한번의 요청만을 보낸다.