10. Reducer 사용하여 부작용 처리 & Context API 사용하기 : useEffect (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

useEffect

useEffect는 side effect를 수행할 때 사용하는 리액트 훅이다.

리액트에서 side effect란 쉽게 설명하면 리액트에서 UI를 렌더링 하는 것이 아닌 다른 모든 것이라고 생각하면 된다.

 

예를 들어보면

• 백엔드 서버에 http 리퀘스트를 보내는 것
• 브라우저 저장소에 무언가를 저장하는 것
• 타이머를 조정하는 것 등등..

즉, useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다.

 

useEffect는 2개의 인자를 가진다.

• 콜백함수
• dependency array라고 불리는 의존성 배열을 가지고있다. 

이제 useEffect를 어떻게 다루는지 사용해보자.

useEffect 사용

#1 의존성 배열이 아무 요소도 가지고 있지 않다면 오직 첫 렌더링을 할 때만 console.log를 반환한다.

즉 콘솔에 "이펙트 러닝" 이 출력되는 수는 첫 렌더링인 1번 뿐이다.

  useEffect(() => {
    console.log("이펙트 러닝");

  }, []);

 

#2 의존성 배열에 state로 사용되고 있는 변수를 넣어보자.

이 state는 input 의 password를 입력하는 필드의 값이다. password를 입력하는 순간마다 "이펙트 러닝" 이 출력 된다.

  useEffect(() => {
    console.log("이펙트 러닝");
    
  }, [enteredPassword]);

 

#3 다음은 return 값을 줄 때이다.

password를 입력하는 순간마다 "이펙트 러닝"이 출력되며 password가 DOM에서 제거됬을 때 return 값이 출력된다.

즉, id와 password를 입력 후 로그인에 성공되면 password가 DOM 에서 제거되어 "이펙트 클린업" 이 출력 되는 것이다.

  useEffect(() => {
    console.log("이펙트 러닝");

    return () => {
      console.log("이펙트 클린업");
    };
  }, [enteredPassword]);

 

setTimeout, clearTimeout 과 함께 써보기

#2는 의존성 배열의 값이 리렌더되는 순간마다 콘솔에 출력을 했었다. 

그 방법은 불필요한 네트워크 트레픽을 만드는 방법이므로 아래의 코드로 보완을 할 수있다.

의존성 배열 값이 리렌더 되고 0.5초가 지나야만 "Checking form validity!" 를 출력한다.

password로 예를 들면 password를 입력할 때는 "클린업" 만 렌더가 되다가 password를 다 입력한 후 0.5초가 지나면

"Checking form validity!"가 출력되는 것이다.

  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log("Checking form validity!");
      setFormIsValid(
        enteredEmail.includes("@") && enteredPassword.trim().length > 6
      );
    }, 500);

    return () => {
      console.log("클린업");
      clearTimeout(identifier);
    };
  }, [enteredEmail, enteredPassword]);