useEffect
useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.
컴포넌트가 마운트 됐을 때, 컴포넌트가 언마운트 됐을 때, 컴포넌트가 업데이트 됐을 때 특정 작업을 처리할 수 있다.
즉, 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect를 사용해야한다.
useEffect() 사용법
기본형태
useEffect(function, deps)
- function: 수행하고자 하는 작업
- deps: 배열 형태이며 의존성 배열이라고 한다. 배열 안에는 검사하고자 하는 특정 값 or 빈 배열
활용해보기!
import를 사용해 useEffect 함수를 불러온다.
import React, { useEffect } from 'react';
1. 컴포넌트가 마운트 됐을 때 (처음 나타났을 때)
컴포넌트가 화면에 가장 처음 렌더링 될 때, 한번만 실행하고 싶으면 deps 위치에 빈 배열을 넣는다.
useEffect(() => {
console.log("마운트 될 때만 실행");
}, []);
만약 배열을 생략한다면, 리렌더링 될 때 마다 실행된다.
useEffect(() => {
console.log("렌더링 될 때마다 실행");
});
2. 컴포넌트가 업데이트 될 때 (특정 props, state가 바뀔 때)
특정 값이 업데이트 될 때 실행하고 싶을 때는 deps 위치의 배열 안에 검사하고 싶은 값을 넣어준다.
useEffect(() => {
console.log(name);
console.log("업데이트 될 때 실행");
}, [name]);
3. 컴포넌트가 언마운트 될 때 (사라질 때) & 업데이트 되기 직전에
cleanup 함수 반환 (return 뒤에 나오는 함수이며 useEffect에 대한 뒷정리 함수라고 한다.)
언마운트 될 때만 cleanup 함수를 실행하고 싶을 때
: 두 번째 파라미터로 빈배열을 넣는다.
특정값이 업데이트 되기 직전에 cleanup 함수를 실행하고 싶을 때
: deps 배열 안에 검사하고 싶은 값을 넣는다.
useEffect(() => {
console.log("effect");
console.log(name);
return () => {
console.log("cleanup");
console.log(name);
};
}, []);
cleanup 함수란?
- 클린업이란 어떤 컴포넌트가 화면에서 사라졌을 때, 무언가를 실행하는 과정을 클린업이라고 표현한다.
- 클린업 하는 방법은 useEffect 안에서 return을 하고 실행되길 원하는 함수를 작성하면 된다.
// src/App.js
import React, { useEffect } from "react";
const App = () => {
useEffect(()=>{
// 화면에 컴포넌트가 나타났을(mount) 때 실행하고자 하는 함수를 넣어주세요.
return ()=>{
// 화면에서 컴포넌트가 사라졌을(unmount) 때 실행하고자 하는 함수를 넣어주세요.
}
}, [])
return <div>hello react!</div>
};
export default App;
예시
// src/SokSae.js
import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
const 속세 = () => {
const nav = useNavigate();
useEffect(() => {
return () => {
console.log(
"안녕히 계세요 여러분! 전 이 세상의 모든 굴레와 속박을 벗어 던지고 제 행복을 찾아 떠납니다! 여러분도 행복하세요~~!"
);
};
}, []);
return (
<button
onClick={() => {
nav("/todos");
}}
>
속세를 벗어나는 버튼
</button>
);
};
export default 속세;
'강의' 카테고리의 다른 글
리액트 심화 주차 필수 개념 정리(1) (0) | 2024.09.06 |
---|---|
hover (1) | 2024.08.20 |
드디어 React (0) | 2024.08.08 |
CSS 활용해서 반응형 웹사이트 만들기 (0) | 2024.08.05 |
[Git] 브랜치 생성, 브랜치 목록 확인 및 원격 브랜치 로컬로 가져오기 (0) | 2024.08.05 |