[뷰쟁이의 리액트 시작하기] react useEffect로 랜더링 상태 관리하자

[!이시중] 2021년 11월 1일 22:53에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/44 에서 확인할 수 있음.

 

---

react에서 hook을 도입하면서 제일 좋아진 이점은 바로 함수형 컴포넌트 + 상태 관리가 한 번에 된다는 점이었다.

 

 

hook에 대한 자세한 사항은 다음 포스팅을 읽으면 좋을 듯 하다 -!

https://yuniel.tistory.com/42

[뷰쟁이의 리액트 시작하기] 리액트 hook 이란?

 

아무튼 개인적으로 그 중에 가장 체감적으로 많이 느껴지는 부분은 바로 useEffect를 사용할 때이다. 아마 랜더링 될 때, 업데이트될 때, 렌더링이 디스트로이 될 때 모두 사용이 가능하다고 생각하면 된다.

 

Vue - created or mounted
React - componentDidMount

 

먼저 랜더링 초기에 불려지는 created/mounted/componentDidMount의 상태를 표현하는 방법을 알아보자.

import React, { useEffect } from 'react';

useEffect(() => {
	console.log('created or mounted or componentDidMount');
}, []);

여기서 바로 중요한 포인트는 마지막에 []를 붙여준다는 점이다. 어떠한 변수도 detacting/observe를 하지 않겠다는 의미라고 생각하면 될 듯하다. 즉 [] 빈 배열의 형태로 넣어준다면 초기에 최초 한 번만 불러올 수 있는 것이다. 그럼 []이 안에 무언가를 넣으면 어떻게 될까?

 

Vue - updated
React - componentDidUpdate

 

import React, { useEffect } from 'react';

useEffect(() => {
	console.log('updated or componentDidUpdate');
}, [추적하고 싶은 변수]);

해당 곳에 추적하고 싶은 변수 명을 넣으면 값이 변할 때 마다 useEffect가 실행된다. 다만 변수명이 변할 때 + 초기 랜더링 시에도 한 번 불리어진다. 혹 로직에서 초기에 실행되지 말아야 하는 부분이 있다면, 현재 파일의 상태가 최초 랜더링의 시기인지 아닌지의 판단을 해주는 추가 로직이 필요하다. 즉, useEffect에서 []와 [추적하고 싶은 변수]를 동시에 썼을 때, 초기 한 번은 모든 이벤트가 일어나기 때문에 중복을 야기할 수 있다.

 

그러나 이렇게 특정값을 추적하는 경우 말고, 재랜더링이 일어날 때마다 실행되게 할 수 있는 방법도 있다.

 

import React, { useEffect } from 'react';

useEffect(() => {
	console.log('updated or componentDidUpdate');
});

바로 뒤에 아무것도 쓰지 않는 방법이다. 이렇게 되면 어떤 것을 쫓아야 할지 몰라 랜더링이 일어나는 모든 순간마다 해당 로직이 실행되게 된다. 로직에 따라 과부하가 걸릴 수도 있으니 유의할 것!-!

 

 

Vue - distroyed
React - componentWillUnmount

랜더링 상태 중에서 생성되고, 업데이트되고 다음 큰 부분이 바로 파괴될 때이다. 단어 그대로 해석하니까 어감이 조금 센 감이 없지 않지만 해당 파일이 제거될 때, 처리해야만 하는 로직이 있는 경험을 종종 해왔을 것이다. 그때 사용하는 방법이 hook에도 있다.

import React, { useEffect } from 'react';

useEffect(() => {
	return() => {
    	console.log('distroyed or componentWillUnmount');
    }
}, []);

간단하게 useEffect 내부에 reture 함수로 로직을 적어주면 랜더링이 사라지면서 해당 로직을 불러오게 된다.

 

---

 

vue에 더 많이 익숙한 사람이라 created, updated 등 상태에 따라 함수 별로 나뉜 방식에서 react hook으로 관리를 하라고 하니 난감할 수밖에 없던 경험이 있다. 어떻게 검색해야 할지도 몰라 하나하나 찾아보고, 시도해 보면서 알아낸 방법들을 모아 글을 적게 되었다. 부디 나와 같이 헤매는 분들께 이 포스팅이 닿기를 바란다.