[React] useEffect란 ?

이번시간에는 React에서 제공하는 Hooks중 하나인 useEffect에 대해서 알아보도록 하겠습니다.

 

1.UseEffect란?

useEffect Hook을 이용하여 우리가 React에게 컴포넌트가 렌더링 된 이후에

어떤일을 수행할지 정해줄 수 있습니다.

useEffect는 기본적으로 몇 가지 조건에 의해 작동합니다.

• 페이지가 처음 렌더링 되고 난후 useEffect는 무조건 한번 실행됩니다.
• useEffect에 배열로 지정한 useState 값이 변경될 때 실행되게 됩니다.

즉 React에서는 우리가 작성한 함수를 기억했다가 DOM 업데이트

수행 이후에 이를 불러내서 실행해주게 됩니다.

UseEffect를 컴포넌트 안에서 부르면?

useEffect를 컴포넌트 내부에 두어 effect를 통해 앞전에 나온

state 변수 혹은 props에 접근할 수 있게 됩니다.

 

2. useEffect의 구조

import React, {useState, useEffect} from 'react';

export default function Example() {
   const [count, setCount] = useState(0);
   
   useEffect(() => {
      console.log(`${count} times clicked`);
   })
   
   return (
      <p>{count} times clicked!</p>
      <button onClick={() => setCount(count+1)}>
        Increase
      </button>
   )

}

useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 하는 Hook(훅)입니다.

 

위 코드의 예시로 버튼을 클랙해을때마다 count의 값이 바뀌어 다시 렌더링이 되기 때문에

버튼을 클릭할 때마다 useEffect 안에 있는 console이 찍히게 되는 것 입니다.

 

3. 자세한 사용법

처음 렌더링에만 실행하고 싶을 때 

import React, { useState, useEffect } from 'react';
function Example() {
   const [count, setCount] = useState(0);
   
   // 함수의 두번째 파라미터에 빈배열을 작성해준다.
   useEffect(() => {
      console.log(`${count} times clicked`);
   },[])
   
   return (
     <p>{count} times clicked!</p>
     <button onClick = {() => setCount(count + 1)}>
        Increase
     </button>
   )
}

가장 처음 랜더링이 될 때만 실행하고 그 이후에는 실행을 할 필요가 없다면 함수의 두번째 파라미터에는

빈 배열로 넣어주면 됩니다.

 

특정 값이 업데이트 될 때만 실행하고 싶을 때

import React, { useState, useEffect } from 'react';
function Example() {
   const [count, setCount] = useState(0);
   
   // 함수의 두번째 파라미터로 전달되는 배열안에 검사하고 싶은 값을 추가
   useEffect(() => {
      console.log(`${count} times clicked`);
   },[count])
   
   return (
     <p>{count} times clicked!</p>
     <button onClick = {() => setCount(count + 1)}>
        Increase
     </button>
   )
}

배열 안에 useState통해 관리되는 상태값을 넣어줘도 되고 또한 props로 전달받은 값을 넣어 주어도 됩니다.

실제로는 여러값들이 존재하는 컴포넌트에서 특정 값이 변할때만 useEffect를 호출하기 위해서 꼭 알아둬야 합니다.

컴포넌트가 업데이트  될때 (특정 props, state가 바뀔때)

useEffect(() => {
  console.log("바뀌는 값")
},{props(바뀌는 값))

 

마무리 하기

import React, {useState, useEffect} from 'react';

function Example() {
   const [count, setCount] = useState(0);
   
   // 함수의 두번째 파라미터에 빈 배열 작성 
   useEffect(() => {
     console.log("effect");
     console.log(`${count} times clicked`)
     
     return () => {
         console.log('cleanup');
         console.log(`${count} times clicked`);
     }
   })
   
   return (
     <p>{count} times clicked!</p>
     <button onClick = {() => setCount(count+1)}>
      Increase
     </button>
   )
}

컴포넌트가 언마운트 되기 전이나, 업데이트 되기 직전에는 어떠한 작업을 수행하기 위해서 

useEffect에 cleanup 함수를 반환해주어야 합니다.

 

컴포넌트가 나타날 때 콘솔에는 effect가, 사라질 때는 cleanup이 보여지게 되고,

만약 언마운트 될 때만 뒷정리 함수를 호출해주고 싶다면 

useEffect 함수의 두번째 파라미터에 빈 배열을 넣어주면 됩니다.

 

 

참고 자료

useEffect란

[React] useEffect 뿌시기