Next js (넥스트 js)- Hook 2편 - useEffect

1편 - useRef 에 이어

2편 - useEffect 다

 

---

 

useEffect는 react에서 기본적으로 제공해주는 훅 함수중 하난데,

엄청 많이 쓰인다.

​

간단히 설명하자면,

​

​

React Component가 "렌더링" 될 때마다 특정 작업을 실행한다.

​

​

useEffect의 사용법은 간단한데,

 

 

useEffect( fucntion , [ 인자])

 

이렇게 쓰인다,

​

finction에는 수행하고자 하는 작업

[ 인자 ] 는 배열 형태로, 컴포넌트가 Mount 될 때, 인자로 넣어놓은 값이 업데이트 될 때

useEffect를 실행시키는 용도이다.

​

​

** 모든 Hook(훅) 이 마찬가지 지만,

​

사용할 떄는 선언부터 해야한다.

 

import React, { useEffect } from 'react';

 

 

useEffect 사용 방식.

​

1. componentDidMount (처음 실행 될 때)

​

마운트는 렌더링과 다르다.

즉 처음에만 실행된다.

렌더링 = 업데이트 될 때 마다 실행

 

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

 

 

여기서 배열을 생략하면, 렌더링 될 때 마다 실행된다.

​

​

2.componentDidUpdate ( useEffect의 [ 인자 ] 가 업데이트 될 때)

 

useEffect( ()=> {
 console.log(count);
console.log('count가 바뀔 때 마다 실행된다.');
} ,[ count ]);

 

 

count를 인자로 넣어주었고, count가 바뀔 때 마다 ,useEffect가 실행된다.

​

(반대로 말하면, count가 바뀔 때 ,업데이트 하고 싶다면 )

​

여기서

[ count ] 에는 , count 이외에도 여러가지 변수가 변함에 따라 모두 업데이트 할 수록 걸 수 있다.

​

ex) [ count, name, height, width] 이렇게.

​

2번째 케이스에서는

마운트, 렌더링 시 둘 다 작동한다.

​

혹시나 , 마운트 될 떄는 작동안시키고, 렌더링 떄만 작동하고 싶어요 라면,

1편의 useRef를 사용해보자.

​

 

const mount = useRef(false);

useEffecxt(()=> {
if(!mount.current) {
mount.current = true;
 }
else {
 console.log(count);
console.log('name이 바뀔 때 마다 실행된다.');
  }
}, [count ])

 

 

3. componentDidUnMount( 컴포넌트가 사라질 때, 인자로 인해서 업데이트 되기 전에)

​

CleanUp 함수라고도 하며,

​

새로 렌더링 될 때, 어떻게 처리할래? 를 맡는다.

​

중요한건 : CleanUp 역할을 하는 부분은 return 문이다.

 

 

useEffect( ()=> {
 console.log(count);
console.log('name이 바뀔 때 마다 실행된다.');

return () => {
console.log("리렌더링 때 or unMount 될 때");
}
} ,[ count ]);

 

 

혹시나 unMount 될 때만 작동시키고 싶다면,

[]<< 인자 배열에 빈 배열을 넣으면 된다.

​

​

여기까지가 useEffect에 대한 설명입니다.

​

자세한 건 실제로 코드를 짜보면서 접하는게 더 좋습니다.

​

도움이 되었다면

좋아요와 댓글 부탁드립니다.

​