useEffect
Jan 30, 2021
»
REACT
useEffect란?
컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook으로써 클래스 컴포넌트에서 사용되던 생명주기 메소드를 함수형에서도 사용할 수 있게하는 Hook
-
사용법
// useEffect 불러오기 import React, { useEffect } from 'react'; // 기본 형태 useEffect(() => , deps) // deps는 배열 형태이며 의존값이나 빈 배열을 넣음
컴포넌트가 mount 됐을 때(처음 나타났을 때)
컴포넌트가 화면에 가장 처음 렌더링 될 때만 실행하고 싶으면 deps 위치에 빈 배열을 넣음
useEffect(() => {
console.log("처음 렌더링 될 때 실행됨");
}, []);
배열을 생략하면 리렌더링 될 때마다 실행됨
useEffect(() => {
console.log("렌더링 될 때마다 실행됨");
});
컴포넌트가 update될 때(특정 props, state가 바뀔 때)
특정값이 업데이트 될 때마다 실행하고 싶으면 deps 위치의 배열 안에 의존값을 넣어준다
업데이트 될 때만 실행되는 것이 아닌 마운트 될 때도 실행된다
-
업데이트 될 때만 특정 함수를 실행하는 방법
const mounted = useRef(false); // 기본값을 false로 useEffect(() => { // 기본값이 false이므로 mounted.current가 바뀌지 않는 이상 마운트될때 실행되지 않음 if(!mounted.current) { mounted.current = true; } else { // any code } }, [바뀌는 값]);
컴포넌트가 unmount 될 때(사라질 때) && update 되기 직전에
return 뒤에 코드를 작성해주면 unmount될 때 사용됨
useEffect(() => {
console.log("noting");
return console.log("umount");
}, []); // 빈 배열을 넣으면 unmount 될 때만 실행됨