useEffect

리액트 컴포턴트가 렌더링이 완료(HTML이 보여지고)된 후 특정 작업을 실행할 수 있도록 하는 Hook이다.

• 호출된 타이밍은 렌더링 결과 실제 DOM에 반영된 직후이다.
• 컴포넌트가 사라지기 직전에도 마지막으로 호출된다.
• 렌더링이 끝나고 어떤 작업(API호출 등...)을 하고 싶다면 useEffect 첫번째 매개변수로 함수를 전달해주면 된다.

자바스크립트에서는 무거운 코드가 실행시간을 잡아 먹기 때문에 HTML을 먼저 보여주고 그 다음 무거운 코드를 실행하여 고객들에게 로딩하는 시간을 줄여주기 위한 방법으로 적합하다.

사용하기 좋은 작업

• 어려운 연산
• 서버에서 데이터 가져오는 작업
• 타이머 장착하는거에 유용하다.

문법

useEffect(function, deps)

• function : 수행하고자 하는 작업.
• deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열

사용법

useEffect 함수 불러오기

import React, { useEffect } from "react";

컴포넌트가 화면에 가장 처음 렌더링 될 때 한 번만 실행하고 싶을 때는 두번째 인자(deps) 위치에 빈 배열을 넣는다.

useEffect(() => {
  console.log("Hello World");
}, []);

문법 & 사용법 참고자료

useEffect(()=>{
	console.log("change")
})

• 이 함수가 호출된 타이밍은 렌더링 결과 실제 DOM에 반영된 직후이다.
• 컴포넌트가 사라지기 직전에도 마지막으로 호출된다.

clean up function

useEffect 실행하기 전에 특정 코드를 실행하고 싶으면 return문에 코드를 작성해주면 된다.

• mount(컴포넌트 추가 될 때) 시 실행안됨
• unmount(컴포넌트 삭제되거나 다른 페이지 넘어갔을때) 시 실행됨

useEffect(()=>{
	console.log("clean up function")
  	return(
    	console.log("useEffect() 실행되기 전에 실행된다.")
    )
},[]);

useEffect 함수에 두번째 인자의 중요성

DayList.jsx

import { useEffect, useState } from "react"

export default function DayList(){
    const [days, setDays] = useState([]);
    const [count, setCount] = useState(0);

    function onClick(){
        setCount(count + 1);
    }

    function onClick2(){
        setDays([
            ...days,
            {
			...
            }
        ]);
    }
  
    useEffect(()=>{
        console.log("Count change")
    })
    useEffect(()=>{
        console.log("Count change2")

    },[count])
    return(
        <>
        <ul className="list_day">
            {
                days.map(day=>(
				...
                ))
            }
        </ul>
        <button onClick={onClick}>{count}</button>
        <button onClick={onClick2}>Day change</button>
        </>
    )
}

onClick2 함수가 실행되면 첫번째 console.log(Count change)가 의도치 않게 실행된다.
→ ❗️단순히 로그를 찍는 함수가 아니라 무거운 작업을 하는 함수 였다면 문제가 되었을 것이다.
→ ✨ 이러한 문점을 해결하기 위해
useEffect(function, deps)에 두번째 파라미터를 이용하면 된다.
두번째 파라미터는 의존성 배열이다. 의존성 배열이 변경되는 경우에만 이 함수가 실행된다.
두번째 파라미터에는 []를 사용을 하게 되면 최초 렌더링 될 때만 딱 한번만 실행된다. [변경되었을 때 실행될 변수]를 사용하게 되면 해당 변수가 변경되었을 때만 실행된다.

❗️useEffect 에러

경고 이유 : 의존성 배열이 없다라는 뜻이다.

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import Word from "./Word";

export default function Day(){
    const {day} = useParams();
    const [words, setWords] = useState([])

    useEffect(()=>{
        fetch(`http://localhost:3001/words?day=${day}`)
        .then(res => {
            return res.json()
        })
        .then(data =>{
            setWords(data);
        });
    },[day]);
    /*
    useEffect 내부에서 day와 같은 특정 값을 사용하면 의존성 배열안에 값을 입력하라는 뜻이다.
    의존성 배열에 이렇게 [day] day를 넣어주면 최신값이라고 보장받을 수 있다.
    */

    return(
        <>
            <h2>Day {day}</h2>
            <table>
                <tbody>
				...
                </tbody>
            </table>
        </>
    )
}

⚡️useEffect 총 정리

1. 재렌더링마다 코드를 실행하고 싶다면
   useEffect(()=>{ })
2. mount 시 1회 코드실행하고 싶다면
   useEffect(()=>{ },[])
3. 활용

useEffect(()=>{
		//mount, update 시 해당
    return ()=>{
        //unmount시 1회 코드실행하고 싶으면(clean up function)
    }
},[])