useEffect란
- 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook
- 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 됨
(기존 클래스형 컴포넌트에서만 사용 가능했었음)
작업 실행 기준
: 작업 = effect
- mount
- unmount
- update
기능
: 생명주기 메소드의 네가지 기능을 수행함
componentDidMount: mount된 직후componentDidUpdate: 갱신이 일어난 직후componentWillUnmount: 마운트 해제되어 제거되기 직전getDerivedStateFromProps: 최초 마운트 시와 갱신 모두에서 render() 메서드를 호출하기 직전
💡 Mount | 마운트 '시작하다', '올라가다', '끼우다/고정시키다'의 의미가 있음. 즉, 컴포넌트에서 작성한 것을 보기 위해 DOM에 끼운다는 뜻. ➡ 컴포넌트에서 작성한 요소를 DOM에 넣어서 확인하는 것.
💡 render() | 렌더 메서드 React에서 렌더링이란, 컴포넌트가 props와 state를 통해 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업 ➡ render()는 DOM에 html을 그려주는 함수
호출
: useEffect(callbackFunction, dependencies) 로 두개의 인자를 넣어 호출
// 💡 렌더링이 될 때마다 (4가지 생명주기 모두 사용)
useEffect(callBackFunc);
// 💡 최초 렌더링이 되었을 때만 (ComponentDidMount)
useEffect(callBackFunc, []);
// 💡 최초 렌더링 + state가 변경돠었을 시
useEffect(callBackFunc, [state]);
// 💡 clean-up 함수를 활용해 unmount 시 정리하거나 unscribe할 것 처리
// 💡 (componentWillUnmount)
useEffect(()=>{ return(() => func()) });