useEffect와 생명주기

위의 내용을 간단히 정리한다
1. 크게 3개의 페이즈로 구분해서 생각한다 ( mount, update, unmount)

2. 마운트, 업데이트때 해당 컴포넌트의 업데이트 기준을 찾기 위한 props 혹은 state을 구한다 ( getDerivedStateFromProps )

3. shouldComponentUpdate는 해당 기준을 기반으로 컴포넌트가 리랜더링 되야 할 때에 발생 ( 업데이트 내용이 없을 시에는 return null )

4. 그 후에 랜더링이 발생 ( 버츄어 돔 형성 )

5. rendering 이후 상태에 대해 기존 기준(prevProps, prevState) 을 인자로 받아서 스냅샷을 만듦 (componentDidUpdate때 쓰이기 위함)

6. 그 후, 리엑트의 버츄어 돔에 따라 실제 DOM을 업데이트함

7. 컴포넌트가 마운트, 혹은 업데이트 된 이후 componentDidMount,
componentDidUpdate가 발생함.

8. 컴포넌트가 마운트가 끊어지면 componentWillUnmount가 발생함

useEffect(콜백함수, 의존성 배열)

• useEffect는 기본적으로 componentDidMount, componentDidUpdate, componentWillUnmount, getDerivedStateFromProps를 다 다루는 훅임
• 클래스형 컴포넌트는 위에 같은 생명주기를 다 다뤄야 했었으나, 함수형 컴포넌트는 useEffect 훅으로 간단하게 구분하여 실행함
• useEffect는 컴포넌트가 마운트 된 후, 컴포넌트가 업데이트 된 후, 컴포넌트가 언마운트 되기 직전에 실행된다

useEffect(function, [state or props])

• 만약 useEffect의 의존성 배열에 내용이 존재한다면, getDerivedStateFromProps, componentDidUpdate가 발생하는 것과 같음

useEffect(function, [])

• 만약 의존성 배열이 빈배열이라면, 첫 컴포넌트 마운트에 한번만 발생함. 이는 getDerivedStateFromProps, componentDidMount 가 발생

useEffect(function)

• 만약 의존성 배열이 없다면, 마운트, 업데이트 상관없이 언제든 발생함. 이는 getDerivedStateFromProps, componentDidMount, componentDidUpdate가 발생하는 것과 같음

useEffect(()=>{
  return ()=>{}
},[])

• 만약 useEffect의 첫째 인자로 들어가는 함수에서 리턴하는 값이 존재하면, 이것은 componentWillUnmount와 같은 역할을 함. (즉, 마운트가 끊어지기 전에 발생함)