useEffect React hook이 유용하고 사용법이 무엇인지 알아보십시오!

하나의 React hook은 때때로 useEffect입니다.

import React, { useEffect } from 'react'

Hooks의 한 가지 중요한 특징은 기능 구성 요소가 라이프 사이클 후크에 액세스 할 수 있도록 허용하는 것입니다.

클래스 구성 요소를 사용하면 componentDidMount, componentWillUnmount 및 componentDidUpdate 이벤트에 함수를 등록 할 수 있으며 변수 초기화에서 API 호출부터 정리까지 다양한 사용 사례가 제공됩니다.

후크는 useEffect() API를 제공합니다. 이 호출은 함수를 인수로 받아들입니다.

이 함수는 구성 요소가 처음 렌더링 될 때와 이후의 모든 다시 렌더링 / 업데이트시에 실행됩니다. 

React는 먼저 DOM을 업데이트 한 다음 useEffect()에 전달 된 모든 함수를 호출합니다. 

모두 오래된 코드인 componentDidMount 및 componentDidUpdate와 달리 코드를 차단할 때도 UI 렌더링을 차단하지 않고 앱을 더 빠르게 사용할 수 있습니다.

const { useEffect, useState } = React

const CounterWithNameAndSideEffect = () => {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('Flavio')

  useEffect(() => {
    console.log(`Hi ${name} you clicked ${count} times`)
  })

  return (
    <div>
      <p>
        Hi {name} you clicked {count} times
      </p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <button onClick={() => setName(name === 'Flavio' ? 'Roger' : 'Flavio')}>
        Change name
      </button>
    </div>
  )
}

ReactDOM.render(
  <CounterWithNameAndSideEffect />,
  document.getElementById('app')
)

동일한 componentWillUnmount 작업은 선택적으로 useEffect() 매개 변수에서 함수를 반환하여 얻을 수 있습니다.

useEffect(() => {
  console.log(`Hi ${name} you clicked ${count} times`)
  return () => {
    console.log(`Unmounted`)
  }
})

useEffect()는 여러 번 호출 될 수 있습니다. 이는 무관한 논리 (클래스 구성 요소 주기 이벤트를 괴롭히는 무언가)를 분리하는 데 유용합니다.

이후의 모든 재 렌더링 / 업데이트에서 useEffect() 함수가 실행되므로 성능을 위해 Reception에 상태 변수 목록이 포함 된 배열 인 두 번째 매개 변수를 추가하여 실행을 건너 뛰도록 지시 할 수 있습니다. React는 이 배열에 있는 항목 중 하나가 변경되면 부작용만 다시 실행합니다.

useEffect(
  () => {
    console.log(`Hi ${name} you clicked ${count} times`)
  },
  [name, count]
)

비슷하게, React가 비어있는 배열을 전달하여 부작용을 한 번만 (마운트시) 실행하도록 지시할 수 있습니다.

useEffect(() => {
  console.log(`Component mounted`)
}, [])

useEffect()는 로그 추가, 타사 API 액세스 등에 유용합니다.