useEffect에 대해서 알아보자

서론

우리가 동적인 사이트를 만들때 실시간으로 작업을 처리할 필요성을 느낄 때가 있다.
이때 필요한 것이 useEffect 이다.

useEffect란?

React의 useEffect 함수란 컴포넌트가 렌더링될 때마다 특정 작업을 실행할 수 있도록하는 Hook 이다.
컴포넌트가 업데이트 되거나, 마운트되거나, 언마운트됐을 때 특정 작업을 처리하도록 할 수 있다.

기본형태

javascript
복사
1import {useEffect} from 'react';  

위의 코드로 useEffect를 사용할 준비는 끝난다.

javascript
복사
1useEffect(() => {  
2    ~~처리할코드  
3})  

제일 기본적인 형태로 렌더링될 때 마다 실행되는 형태이다.

제일 처음 렌더링 될 때만 실행되게 하려면

javascript
복사
1useEffect(() => {  
2   ~~처리할코드  
3}, [])  

이렇게 끝부분에 빈 배열을 넣으면 된다.

특정값이 바뀔때만 실행

javascript
복사
1useEffect(() => {  
2    ~~처리할코드  
3}, [특정값])  

이렇게 빈배열만 뒀던 부분에 특정값을 넣어두면 저 특정값이 업데이트 될때마다 해당 작업이 실행된다.

컴포넌트가 사라지거나 업데이트되기 직전에 실행

cleanup 함수를 반환하는 방법을 사용한다.

javascript
복사
1useEffect(() => {  
2    ~~처리할코드
3    return () => {  
4      ~~cleanup코드  
5    }  
6}, [])  

다음과 같이 cleanup 코드를 리턴해주면 컴포넌트가 사라질 때 작업을 실행시킬 수 있다.
위와 같은 cleanup을 사용하는 이유는 컴포넌트가 사라질 때 그 값을 사용하고 정리하는 과정이라고 생각하면 편하다.

특정값이 업데이트 되기 전에 사용하고싶으면 빈배열이 있는 자리에 값을 넣으면 된다.

마치며

React를 이용해 동적인 사이트를 만들기 위해서는 알아야하는 것들이 많은 것 같다.