[React Hooks] 함수형 컴포넌트 useEffect 개념 및 사용방법

이번 포스팅에서는 리액트 Hooks의 useEffect 사용 방법에 대해 알아본다.

 

우선 useEffect는 클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount 생명주기를 합친 개념으로 볼 수 있기 때문에 무슨 역할을 하는지를 알아야 한다.

 

componentDidMount: 클래스형 컴포넌트에서 첫 렌더링을 마친 후 실행되는 메서드

componentDidUpdate: 클래스형 컴포넌트에서 render() 함수가 업데이트될 때 실행되는 메서드

render() 함수가 업데이트되는 조건은 아래 포스팅에서 확인 가능하다.

 

https://artistjay.tistory.com/52

 

componentWillUnmount: 클래스형 컴포넌트에서 컴포넌트를 DOM에서 제거할 때 실행되는 메서드

 

한마디로 렌더링을 마친 후 또는 컴포넌트에 변화가 일어났을 때 수행되어야 하는 '어떤 작업'이 있을 때, useEffect를 사용하면 된다.

예를 들면, 화면 렌더링이 완료된 후 관련된 데이터를 서버에서 가져와야 한다던지..

 

사용 방법을 간단하게 알아보자.

 

 

기본 형태는 아래와 같다.

useEffect(Function, deps)

Function: 위에서 정리한 내용에 해당될 때 수행될 메서드

deps: 배열 형태. 필요에 따라 빈 배열이 들어갈 수도 있고, useEffect가 실행되어야 하는 조건 값이 들어갈 수도 있다.

 

componentDidMount처럼 사용하기

두 번째 인자로 빈 배열([])을 넘기는 경우, Mount시 또는 unMount시 1회만 실행된다.

 

useEffect(() => {
    console.log("Mount 되었을 때만 실행");
}, []);

 

 

componentDidUpdate처럼 사용하기

두 번째 인자를 넘기지 않으면 render()가 업데이트될 때마다 실행된다.

 

useEffect(() => {
    console.log("리렌더링 될때마다 실행");
});

 

하지만, 당연히 위의 내용처럼 사용하게 되면 불필요하게 useEffect 함수가 실행되는 경우가 많을 것이다.

그리고, 자칫 잘못했다간 무한히 실행되는 코드가 될 수도 있다.

 

그래서 특정 props 변수나 state가 변경되었을 경우에만 useEffect를 실행하고 싶은 경우 아래와 같이 하면 된다.

 

const [title, setTitle] = useState("");
const [contents, setContents] = useState("");

useEffect(() => {
	console.log("타이틀 또는 컨텐츠가 변경됨!!!");
}, [title, contents]);

 

useEffect 같은 경우에는 어떻게 사용하는지에 따라 성능 차이가 크게 발생할 수 있다.

뭐든 익숙해지는 게 중요하니,, 사용하다 보면 좀 더 잘 사용하는 방법도 알게 되겠지?

 

그럼 도움이 되셨길 바랍니다.