useEffect
useEffect란?
- 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 훅
- useEffect는 컴포넌트가 마운트 됐을 때, 언마운트 됐을 때, 업데이트 됐을 때 특정 작업을 처리할 수 있음
- 클래스형 컴포넌트에서 사용했던 생명주기 메소드와 유사함
Side Effect란?
- 함수가 실행되면서 함수 외부의 값이나 상태를 변경시키는 것
- 컴포넌트의 렌더링과 무관한 연산들
- 무관한 연산을 컴포넌트 내에서 직접 수행하는 것은 개발자가 컴포넌트의 렌더링을 통제할 수 없으므로 지양해야 함
- 예시
- 데이터를 가져오는 외부 API 호출
- 네트워크를 통해 Request 전송
- setTimeout, setInterval 등 타이머 함수
- 컴포넌트의 DOM을 직접 수정
useEffect의 동작
useEffect (()=>{
// 실행할 함수
},[])
- 컴포넌트가 update 될 때
- dependency array에 있는 값이 변할 때마다 실행
useEffect (()=>{
// 실행할 함수
console.log(name)
},[name])
- 컴포넌트가 언마운트 됐을 때
- useEffect의 return 부분은 clean up 함수
- DOM 이벤트 제거, clearTimeout 등 언마운트 되었을 때 정리하는 작업을 주로 수행
useEffect(()=>{
return ()=>{
// 실행할 함수
}
},[])
렌더링 된 이후에 useEffect가 실행됨
- 실행 과정에 state가 변경되면 리렌더링 발생
- 가상 돔 렌더 과정에 Side Effect가 포함되면 Side Effect가 발생할 때마다 가상 돔을 다시 렌더해야 함
- 그러므로 가상 돔은 Side Effect를 제외한 순수한 컴포넌트 만을 사용해 렌더링을 함
- 렌더링 이후에 Side Effect를 처리하는 것은 사용자 경험에도 좋음
시간이 많이 걸리거나 비동기 작업의 처리는 useEffect가 유용하다!
