🌱 Side Effect
Side Effect란 애플리케이션에서 일어나는 다른 모든 것을 의미한다. 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우나, React 컴포넌트가 화면 렌더링 이후 비동기 처리되어야 하는 부수적인 효과이다.
Side Effect가 일어났다고 하는 경우는 다음과 같다.
- http 리퀘스트를 보내거나, 브라우저 저장소에 무언가를 저장
- 브라우저 API와 상호작용
- 이벤트를 활용하여 DOM을 직접 조작
Side Effect는 외부 세계 와 함께 수행되어 결과를 예측할 수 없다. 즉, 순수함수는 Side Effect가 일어나지 않는다. 왜? 순수함수는 예측 가능한 결과, 어떤 전달 인자가 주어져도 항상 같은 값이 리턴된다는 것이 보장된다. 하지만 Side Effect는 그렇지 않다. 서버에 데이터를 요청해서 받은 응답 데이터로 어떠한 것을 만든다던가... setTimeout과 같은 타이밍 함수 사용처럼 수행한 결과를 예측할 수 없다. 이런 Side Effect를 처리하기 위한 방법이 useEffect 이다.
📌 useEffect
의존성으로 구성된 배열, 컴포넌트 함수내에서 실행할 수 있는 또 다른 함수, 두 개의 매개변수를 받는다.
- 함수
- 모든 컴포넌트 평가 후에 실행되어야 하는 함수(지정된 의존성이 변경되었을 때)
- 컴포넌트 생성 후 처음 화면에 렌더링(표시)
- 컴포넌트에 새로운 props가 전달되며 렌더링
- 컴포넌트에 상태(state)가 바뀌며 렌더링
- 의존성
- 지정된 의존성이 바로 두 번째 인자이다.
import { useEffect } from 'react';
function hello() {
// Hook은 최상위에서 호출해야 한다.
useEffect(() => {
//의존성이 변경 후, 실행됨
}, []) // 의존성 배열
}