useEffect hook은 함수 컴포넌트에서 side effect를 수행할 수 있게 만드는 리액트 컴포넌트가 렌더링되거나 상태가 업데이트될 때, 특정 작업을 실행할 수 있도록 하는 hook이다.
useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정 작업을 처리한다.
클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 해주는 함수이다.
- side effects(부수 효과)란? 함수 실행 시 함수 외부의 상태를 변경하는 모든 연산을 부수 효과라고 한다. 리액트에서의 부수효과는 데이터 가져오기, 구독(subscription) 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 것까지 이 모든 것이 side effects이다.
- 생명주기 메소드와의 비교 useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋다.
useEffect() 사용법
기본 형태: useEffect(function, deps)
- function : 수행하고자 하는 작업, 마운트 될 때는 useEffect에 있는 콜백 함수를 제외한 함수의 작업들이 실행되고 언마운트 될 때는 function이 반환하는 콜백 함수가 실행된다. useEffect 훅에 입력되는 함수는 랜더링 결과가 실제 돔에 반영된 후 호출된다.
- deps : 배열 형태로 배열 안에서 검사하고자 하는 특정 값 or 빈 배열, useEffect가 의존, 참조하는 값이 있다면 deps에 넣어주는 것이 기본 규칙이다. 넣어주지 않는다면 useEffect에서 참조하는 값이 업데이트 되지 않는다. 그래서 최신 상태, 최신 props를 function에서 참조 또는 사용하지 않는다.
- 만약 deps를 생략한다면, 컴포넌트의 모든 요소가 바뀔 때 마다 useEffect 함수가 호출 된다.
import React, {useEffect, useState} from 'react';
function TestComponent() {
const [test, setTest] = useState();
useEffect(() => {
console.log("이건 컴포넌트가 마운트 될 때 한번만 실행된다.");
return () => {
// clean-up
console.log("이건 컴포넌트가 언마운트 될 때 한번만 실행된다.");
}
},[])
useEffect(() => {
console.log("이건 test가 변경되어 상태가 업데이트 될 때마다 실행된다.")
return () => {
console.log("이건 test가 변경되어 상태가 업데이트 되기 전에 실행된다.")
}
},[test])
return (
<>테스트 컴포넌트</>
)
}useEffect 의문사항
- useEffect 가 하는 일
React는 useEffect Hook을 통해 작업(함수)를 넘겨 받아서 함수를 기억했다가 DOM 업데이트를 수행한 이후에 불러낸다. 이런 방식으로 side effect를 수행한다.
- useEffect를 컴포넌트 안에서 불러내는 이유는?
useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 state 변수(또는 그 어떤 prop에도)에 접근할 수 있게 있다. 함수 범위 안에 존재하기 때문에 특별한 API 없이도 값을 얻을 수 있어서 편리하게 사용할 수 있다. Hook은 자바스크립트의 클로저를 이용하여 React에 한정된 API를 고안하는 것보다 자바스크립트가 이미 가지고 있는 방법을 이용하여 문제를 해결합니다.
useEffect는 렌더링 이후에 매번 수행되는가?
기본적으로 첫번째 렌더링과 이후의 모든 업데이트에서 수행된다. 마운팅과 업데이트라는 방식으로 생각하는 대신 effect를 렌더링 이후에 발생하는 것으로 생각하는 것이 더 쉽다. React는 effect가 수행되는 시점에 이미 DOM이 업데이트되었음을 보장한다.
