[React] useEffect

useEffect란
리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook

useEffect(() => {
    // 두번째 파라미터인 []이 수정될 때 마다 실행되는 코드
    // []안에 값이 없을 경우 컴포넌트가 마운트될 때 최초 한번 실행
    // 두번째 파라미터가 비어있을 경우 렌더링 될때마다 실행
    return () => {
      // 컴포넌트가 제거되기 전에 실행되는 코드
    }
  }, [input])

컴포넌트가 마운트 될 때 최초 한번만 실행

클래스 컴포넌트 - componentDidMount()

함수형 컴포넌트

useEffect(() => {
    // code
  }, [])

컴포넌트가 업데이트 되는 경우 실행

클래스 컴포넌트 - componentDidUpdate()

함수형 컴포넌트

useEffect(() => {
    // code
  })

 

컴포넌트가 언마운트 되기전에 실행

클래스 컴포넌트 - componentWillUnmount()

함수형 컴포넌트

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