React Hook - useEffect 생명주기를 참조하여 동작

class형 컴포넌트에서 componentDidMount등의 컴포넌트의 생명주기를 활용하여 상태값을 변경하는 등의 작업을 실행할 수 있습니다.

함수형 컴포넌트에서도 마찬가지로 컴포넌트의 생명주기를 참조하여 작업을 할 수 있습니다.

생명주기

React는 state의 상태를 항상 체크하듯이, 마찬가지로 component의 상태도 항상 체크합니다.

ComponentDidMount

컴포넌트가 최초로 render 되었을 때를 의미합니다.
상태값과 관련없이 render의 완료시점을 봅니다.

ComponentDidUpdate

상태값 state가 변경된 시점을 봅니다.

ComponentWillUnmount

컴포넌트의 구독해제 시점입니다.
useEffect 의 콜백이 모두 실행된 시점입니다.

class형 컴포넌트에서 생명주기함수를 사용할 수 있습니다!
방법을 모르신다면, 한번 찾아보시는 것을 추천합니다.

useEffect

위에 서술한 생명주기를 바탕으로 useEffect내의 콜백이 실행됩니다.

// ..code

const Table = () => {
  const [count,setCount] = useState(0)
  const [value,setValue] = useState('')
  
  useEffect(()=>{
    setValue('랜더됐네용')
  },[]) // componentDidMount
  
  useEffect(()=>{
    setValue('숫자가 올라갔어!')
    return () => {
      console.log('나 effect됨!') // componentWillUnmount
    }
  },[count]) // componentDidUpdate
  
  return(
    <>
       <button onClick={ () => { setCount((prev) => prev+1) } }>
          Click me
        </button>
    	{count} // state
		{value} // state
    </>
  )
}

버튼 클릭시 countstate가 1씩 증가하는 컴포넌트 입니다.
useEffect의 두번째 인자는 값이 비어있을때와 채워져 있을때로 나뉩니다.

• 값이 비워있음
  시점은 ComponentDidMount
• 값이 채워져있음
  시점은 ComponentDidUpdate
  바라볼 상태값(state)는 두번째 인자로 적은 'state'.

최초 Table랜더시 valuestate는 '랜더됐네용'으로 변경됩니다.

여기서 첫번째 useEffect는 컴포넌트가 랜더될때까지 기다려야 하므로, 코드를 읽는 중 useEffect를 만나도 실행하지 않고 기다리게 됩니다.
이 후, componentDidMount가 되면 setValue를 실행합니다.

1. Table호출 -> useEffect대기
2. Table랜더완료
3. componentDidMount 조건의 useEffect 실행
4. 콜백인 setValue실행
5. {value} = '랜더됐네용'

두번째 useEffect는 countstate가 변경 되는 시점을 기다리게 됩니다. (componentDidUpdate)

1. onClick으로 countstate +1 증가
2. state변경으로 Table컴포넌트 reRender -> 두번째 useEffect의 두번째 인자인 count 바라봄
3. onClick으로 count는 1이 되었지만, 아직 두번째 useEffect의 count는 0이었던 상태.
4. 이는 생명주기 componentDidUpdate와 같으므로 두번째 useEffect는 실행됩니다.
5. 콜백인 setValue실행
6. {value} = '숫자가 올라갔어!

issue

useEffect는 생명주기를 항상 참조하므로, 그 시점을 파악하며 사용하는 것이 중요합니다.