useEffect 사용 예시

사이드 이펙트를 다루는 useEffect 훅

함수 컴포넌트 안에서 사용하는 함수지만 특정 변수가 바뀔 때만 실행되게 할 수 있다.

useEffect(() => { /** 실행할 함수 */ }, [ /** 의존성 배열 */ ])

useEffect 훅은 실행할 함수와 의존성 배열을 매개 변수로 받는다.
실행할 함수는 함수 컴포넌트가 리렌더링 될 때에도 실행되지 않지만,
의존성 배열의 값들이 바뀐다면 컴포넌트가 다 평가된 후에 함수가 실행된다.

💡 의존성 배열이 빈 값이라면 애플리케이션이 처음 실행 될 때만 함수가 실행된다.

따라서 의존성 배열에는 변경될 가능성이 있는 것들만 넣어준다.
변경될 가능성이 없는 값들은 아래와 같다.

1. 상태를 관리하는 함수 - 리액트에서 변경되지 않음을 보장한다.
   상태는 바뀌어도 상태를 관리하는 set어쩌고 함수는 바뀌지 않는다.
2. 브라우저 내장 함수 - fetch, localStorage, setTimeout 등
   리액트의 리렌더링과 관련 없으며 얘도 바뀌지 않는다.
3. 해당 컴포넌트 함수의 외부에서 선언된 변수나 함수
   단순히 다른 컴포넌트를 이야기 하는 것이 아니라
   export 하는 그 함수 컴포넌트를 이야기 하는 것임!

import React, { useState, useEffect } from "react";

// 얘는 의존성 배열에 추가하지 않음 (3번의 경우)
let myVariable = '';

const Login = (props) => { ... }
export default Login;

이 외에 컴포넌트 함수에 정의된 변수나 상태, 컴포넌트 함수에 정의된 props 또는 함수는 필요한 것이라면 모두 의존성 배열에 추가해준다.

---

사용 예시

1. 백엔드에서 받은 로그인 되었다는 정보를 저장하기 (새로고침하면 없어지니까)

const [isLoggedIn, setIsLoggedIn] = useState(false);
const storedUserLoggedInInform = localStorage.getItem("isLoggedIn");
if (storedUserLoggedInInform === "1") {
  setIsLoggedIn(true);
}

만약 컴포넌트가 리렌더링 될 때마다 상태를 관리하는 함수를 실행하게 된다면, 위와 같이 무한 루프가 돌게 되어 에러가 발생할 것이다.

왜냐하면 로컬스토리지의 isLoggedIn 이라는 변수가 1이라면
우리 애플리케이션의 isLoggedIn 값이 true로 바뀔 거고,
상태가 바뀌었기 때문에 애플리케이션이 리렌더링 되고 -> 또 바뀌고 -> 리렌더링

➡️ 이런 문제를 해결하기 위해 useEffect 훅을 사용한다.

---

2. 로그인 창 입력값에 따라 유효성 검사하기

위에서 사이드 이펙트에 대해 설명할 때 어떤 액션에 대해
응답으로 다른 액션을 보내는 것 또한 사이드 이펙트라고 했다.

사용자로부터 어떤 값을 입력받는 action 에 대해서
실시간으로 그 입력값이 유효한지 평가하여 결과값을 던져주는 action이
실행되어야 한다면 useEffect를 사용하면 좋다.

/** useEffect 사용하지 않을 때 유효성 검사 코드 */
const emailChangeHandler = (event) => {
  setEnteredEmail(event.target.value);

  setFormIsValid(
    event.target.value.includes("@") && enteredPassword.trim().length > 6
  );
};

const passwordChangeHandler = (event) => {
  setEnteredPassword(event.target.value);

  setFormIsValid(
    event.target.value.trim().length > 6 && enteredEmail.includes("@")
  );
};

const validateEmailHandler = () => {
  setEmailIsValid(enteredEmail.includes("@"));
};

const validatePasswordHandler = () => {
  setPasswordIsValid(enteredPassword.trim().length > 6);
};

/** useEffect 사용할 때 유효성 검사 코드 */
useEffect(() => {
  setFormIsValid(
    enteredEmail.includes("@") && enteredPassword.trim().length > 6
  );
}, [enteredEmail, enteredPassword]);
// setFormIsValid를 의존성에 추가하지 않는 이유는
// 함수 자체가 바뀔 일이 없기 때문임 (리액트에서 보장)
// 그래서 바뀔 수 있는 값들만 의존성 배열에 추가해준다.

위처럼 useEffect 훅을 사용하면 소스를 훨씬 간단하게 짤 수 있다.