[REACT] HOOK - useEffect

useEffect

• 사이드 이펙트를 수행하기 위한 훅
• 사이드 이펙트는 사전적으로 부작용이라는 뜻으로, 리액트에서 말하는 사이드 이펙트는 그냥 효과 혹은 영향을 뜻한다.
  예를 들면, 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 등의 작업을 의미
• 이런 작업을 이펙트라고 부르는 이유는 이 작업들이 다른 컴포넌트에 영향을 미칠 수 있으며 랜더링 중에는 작업이 완료될 수 없기 때문에 렌더링이 끝난 이후에 실행되어야 하는 작업들
  useEffect는 클래스 컴포넌트에서 제공하는 생명주기 함수인 componentDidMount(), componentDidUpdate() 그리고 componentWillUnmount() 와 동일한 기능을 하나로 통합하여 제공한다. 그래서 useEffect() 훅만으로 생명 주기 함수와 동일한 기능이 수행 가능 하다.

 

useEffect(이펙트함수, 의존성 배열)

의존성 배열이란 말 그대로 해당 이펙트가 의존하고 있는 배열을 의미한다. 배열 안에 있는 변수 중에 하나라도 값이 변경 되었을 때 이펙트 함수가 실행 되게 된다.

기본적으로 이펙트 함수는 처음 컴포넌트가 렌더링된 이후와 업데이트로 인한 재렌더링 이후에 실행 됨

만약 이펙트 함수가 마운트와 언마운트시에 단 한번씩만 실행되게 하고 싶으면, 의존성 배열에 빈 배열([])을 넣으면 됨

이렇게 하면 해당 이펙트가 props 나 state에 있는 어떤 값에도 의존하지 않는 것이 되므로 여러번 실행되지 않음.

의존성 배열은 생략도 가능하나 생략하게 되면 컴포넌트가 업데이트 될 때마다 호출됨

 

 

EX

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

function UseEffect01(props){
    const [count, setCount] = useState(0);
    useEffect(()=>{
        document.title = `총 ${count}번 클릭했습니다.`;
    })
    return(
        <div>
            <h1>useEffect01</h1>
            <p>총 {count}번 클릭했습니다.</p>
            <button onClick={()=>setCount(count+1)}>클릭</button>
        </div>
    )
}


export default UseEffect01;

위 코드처럼 의존성 배열 없이 useEffect()을 사용하면 리액트는 DOM이 변경된 이후에 해당 이펙트 함수를 실행하라는 의미로 받아 들인다.

위 코드는 컴포넌트가 업데이트 될 때마다 componentDidMount(), componentDidUpdate() 와 동일한 역할을 실행 한다.

또한 이펙트 함수는 함수 컴포넌트안에서 선언되기 때문에 해당 컴포넌트의 props와 state에 접근할 수 있다.