React - useEffect 배우기

useState를 배웠으니 useEffect라는 훅을  살펴보자.

 

useState를 활용하면 setState를 계속해서 해주고 state 값을 계속해서 리-렌더링해주게 된다.

 

하지만 예를 들어 날씨나 교통상황과 같은 데이터를 받을 때 useState를 활용하면

setState가 실행될 때마다 계속해서 데이터를 받아와야하는 고생을 해야한다. 

 

이를 방지하고자 하는 것이 바로 useEffect라는 훅이다.

(리액트 공식 홈페이지 링크 걸어놓음)

 

counter와 keyword의 두 개의 state를 활용하여 useEffect를 살펴보자. 

 

useEffect의 문법은 이렇다

useEffect(실행할 내용, 변수)

실행할 내용은 위와 같은 console.log나 어떤 함수의 내용이나 아무거나 상관없다.

뒤에 나오는 변수가 핵심이다.

 

변수에 해당하는 값이 바뀔 때마다 useEffect 함수를 실행해주는 것이다.

예를 들어 위의 경우에는 keyword와 counter라는 변수에 따라 움직이는 useEffect가 두 개 있고

keyword와 counter 두 개 중 아무거나 변해도 움직이는 useEffect가 있다.

맨 처음에 화면이 실행되었다.

keyword와 counter에 state가 선언되었기 때문에 useEffect의 내용을 실행한다.

keyword에 ㅡ를 입력했더니 keyword 머시기와 keyword and counter 머시기가 떴습니다.

counter가 변하지 않았기 때문에 counter change 는 log가 안되었죠. 

이번에는 counter와 keyword and counter가 모두 log 되었습니다.

keyword는 변하지 않았기 때문에 keyword change는 log가 안되었습니다.

 

변하는 변수에 따라 실행되는 함수를 조정해주면 렌더링하는 양을 획기적으로 줄일 수 있기 때문에 메모리도 많이 세이브할 수 있을 것 같습니다. 

 

useEffect에는 clean-up 함수라는 개념도 내포가 되어있습니다.

useEffect 안에 console.log('hi :)'와 return이 같이 들어있습니다. 

그리고 변수는 []로 비워줌으로써 한 번 선언해주면 함수 안의 내용은 실행되지 않습니다.

그리고 showing에 따라 Hello 컴포넌트를 나타내는 div를 return 해줍니다. 

여기서 show를 클릭하면 showing이 true로 바뀌고 Hello 컴포넌트가 출력됩니다.

그리고 hi :)가 콘솔에 출력됩니다.

이번에는 hide 버튼을 눌러보겠습니다.

이전에 나온 hi :) 이후에 bye :(  하나만 쌓였습니다.

 

이것이 clean-up 함수입니다.

hide를 하면 Hello 컴포넌트가 사라지기 때문에 안에 있는 useEffect를 실행되지 않습니다. 

하지만 return에 clean-up 함수를 넣어놓으면 컴포넌트가 사라질 때 return에 있는 함수를 실행하고 사라집니다. 

 

clean-up 함수는 많이 쓰이지 않는다고 하지만 그래도 어떻게 쓸 줄 알면 좋은 무기가 될 거라 생각합니다.