React Hook lifeCycle 과 Effect Hook

React Hook lifeCycle

React Hook은 함수형 component에서 클래스형 component의 기능을 사용할 수 있게끔 React 16.8에 새로 추가된 기능입니다.

Effect Hook

React 컴포넌트 안에서 데이터를 가져오거나 DOM을 직접 조작하는 작업을 ‘side effects’ 또는 ‘effects’ 라고 합니다.

useEffect

클래스형 component의 componentDidMount, componentDidUpdate, componentWillUnmount 의 기능을 하나로 API로 통합한 Hook 입니다.

clean up 함수란?

useEffect()에서 parameter로 넣은 함수의 return 함수입니다.
Component의 unmount이전, update직전에 어떠한 작업을 수행하고 싶다면 Clean-up함수를 반환해 주어야 합니다.

unmount 될 때

useEffect(func, [])

• compontnt 가 mount 됐을 때 한번만 실행하고 싶으면 빈 배열을 추가합니다.

특정값 update 직전

useEffect(func, [특정값])

• 특정값이 업데이트 될 때 실행하고 싶을 때는 배열안에 검사하고 싶은 값을 넣어줍니다.

작동 순서

re-render -> 이전 effect clean-up -> effect

Hook 사용 규칙

• 최상위(at the top level)에서만 Hook을 호출해야 한다.
  (반복문, 조건문, 중첩된 함수 내에서 Hook을 실행 X)

• React 함수 컴포넌트 내에서만 Hook을 호출해야 한다.