[React Hooks] useEffect 팁

 

🍦 useEffect

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

덕분에 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게됐다.

 

 

---

 

🍰 기본형태

import { useEffect } from "react";

- import 필수!

useEffect(function, deps)

- function : 수행하고자 하는 작업

- deps : 배열 형태로 검사하고자하는 특정 값 또는 빈 배열을 넣는다.

 

 

1️⃣ 컴포넌트가 mount 됐을 때

useEffect(() => {
	console.log('마운트 될 때만 실행된다.');
}, []);

deps에 [] 빈 배열을 넣게되면 마운트 될 때, 즉 실행 후 한번만 실행된다.

 

 

2️⃣ update 됐을 때 (1)

특정 값이 업데이트 될 때만 실행하고 싶을 때

deps 위치에 배열 안에 검사하고 싶은 값을 넣어준다. 

예를 들어서 input 입력값이 바뀔 때만 실행하고 싶으면 아래 예제와 같이 작성하면 된다.

const [inputText, setInputText] = useState(true);

useEffect(() => {
	console.log("특정 값이 바뀔때만 실행된다.);
}, [inputText]);

 

 

3️⃣ update 됐을 때 (2)

계~속 실행하고 싶을 때

예를 들어서 스크롤 값이 변함에 따라 헤더가 바뀌는 이벤트 등

아무것도 입력하지 않으면 된다.

const [inputText, setInputText] = useState(true);

useEffect(() => {
	console.log("변경 이벤트가 실행될때 같이 계~속 실행된다.);
});

 

 

4️⃣ unmount 됐을 때

3에서 설명한 스크롤이 멈췄을 때를 예시로

해당 스크롤 높이 이상이면 헤더를 1번 상태로, 이하이면 2번 상태로 등,, 

그런 등등 이벤트를 return에 지정해주면 된다.

아래와 같이 응용 가능

useEffect(() => {
    function scrollListener() {
        window.addEventListener("scroll", handleScroll);
    } 
    scrollListener(); 
    return () => {
            window.removeEventListener("scroll", handleScroll);
        }; 
});

 

 

 

---