[react 리액트] useEffect 초간단 사용법

1. useEffect() 란?

나 뭐 달라진거 없어?

대상이 변화할 때마다 함수를 다시 실행 함.

컴포넌트가 랜더링 될 때마다 특정 작업을 실행하는 리액트 훅이다.
e.g. 내가 지정한 변수나 오브젝트 등이 업데이트 되면 그것을 인지하고 함수 다시 실행.

* 컴포넌트가 마운트될 때 무조건 한번은 실행 됨.

 

📌 관련 용어 정리

1) Mount : 컴포넌트가 최초로 나타낼 때를 뜻한다.

2) Render : 컴포넌트가 마운트 된 후 컴포넌트가 호출 될 때를 뜻한다.

3) UnMount : 컴포넌트가 사라질 때를 뜻한다.

 

 

 

2. useEffect() 사용법

 

1) 기본 구조

useEffect(콜백함수, dependency)
=== useEffect(()=>{}, [])

* 콜백 함수: 수행하고자 하는 작업

 

 

 

2) dependency

'의존 값'이라 하며 배열의 형태로 표현된다. [ ] (줄여서 deps)
배열 안에 변화를 인지하고자 하는 특정 변수를 넣거나 빈 배열을 넣거나 아무것도 넣지 않는다.

 

A. deps에 빈 배열 [ ]

• 처음 컴포넌트 마운트 됐을 때 useEffect내 함수 호출 (최초 1회)
• 컴포넌트 언마운트 될 때 cleanup 함수 호출

 

B. deps에 의존 값 존재 [ something ]

• 처음 컴포넌트 마운트 됐을 때 useEffect내 함수 호출
• 의존 값이 업데이트 됐을 때 함수 호출
• 컴포넌트 언마운트 될 때 cleanup 함수 호출

 

C. 아예 파라미터를 안 넣었을 경우

• 컴포넌트가 리랜더링 될 때마다 함수 호출

 

 

 

3) import

import { useEffect } from "react";

 

 

 

4) 선언

const data = [1,2,3]

useEffect(()=>{
 alert("data가 변경되었습니다.")
 },[data])

data 가 변경될 때 마다 알림을 생성.

 

 

 

5) Clean Up 함수

useEffect(()=>{
 alert("data가 변경되었습니다.")
 
return ()=>{console.log("클린업")} //클린업 함수
 },[data])

1) 클린업 함수는 useEffect() 의 return에 작성한다.

2) 클린업 함수는 마운트될 땐 실행안되고 매번 useEffect가 실행되기 전에 실행된다.

3) 예를 들어, 사용자 입력값의 유효성을 확인하는 함수가 있는데 이걸 사용자의 매 타이핑마다 확인하면 불필요하게 너무 많은 요청이 생길 수 있다. 이때, setTimeout() 으로 시간차를 둬서 유효성을 확인하되 클린업 함수에 clearTimeout() 으로 해당 setTimeout() 함수를 지워주면 맨 마지막 setTimeout()에 의해 맨 마지막 유효성 검사만 실행 된다.

 

 

* 아래처럼 반복

(타이핑)-> clearTimeout(무효) -> setTimeout(1번) ->

(타이핑)-> clearTimeout(1번 삭제) -> setTimeout(2번) ->

(타이핑)-> clearTimeout(2번) -> setTimeout(3번) -> ...

 

이로인해 무분별한 요청을 줄일 수 있다.

 

 

* 디펜던시(종속값)에 따른 클린업함수

1) useEffect(()=>{}) : 아무것도 없는 경우 // 모든 랜더링마다 클린업 함수 실행

2) useEffect(()=>{},[]) : 빈배열인 경우 // 최초에 실행 안되고 컴포넌트 자체가 새로 랜더링 될 때 클린업 함수 실행

3) useEffect(()=>{},[something]) : 변수 등등이 있는 경우 // 해당 변수가 업데이트 될 때마다 클린업 함수 실행