사용의 효과 / 사용의 효과?

나는 useEffect후크를 깊이 이해하려고합니다 .

언제 어떤 방법을 사용해야하며 왜 그런지 알고 싶습니다.

1.useEffect with no second paraments
 useEffect(()=>{})

2.useEffect with second paraments as []
  useEffect(()=>{},[])

3.useEffect with some arguments passed in the second parameter
 useEffect(()=>{},[arg])

useEffect(callback)

모든 컴포넌트 렌더 에서 실행 됩니다 .

일반적으로 모든 렌더링에서 함수의 본문 실행과 유사한 디버깅에 사용됩니다.

const Component = () => {
  callback()
  return <></>;
};

useEffect(callback,[])

구성 요소 마운트에서 한 번 실행 됩니다.

일반적으로 데이터 가져 오기 등으로 구성 요소 상태를 초기화하는 데 사용됩니다.

참고 : 콜백 은 렌더 단계 (알려진 "Gotcha") 후에 실행 됩니다.

useEffect(callback,[arg])

런 변화 의 arg값입니다.

"에 변경" 을 참조 얕은 비교 의 이전 값 arg(값 비교 arg이전 렌더링에서 현재를, prevArg === arg ? Do nothing : callback()).

일반적으로 props / state change에서 이벤트를 실행하는 데 사용됩니다.

참고 : 여러 종속성이 제공 될 수 있습니다. [arg1,arg2,arg3...]

• useEffectDan Abramov 의 완벽한 가이드
• useEffectAPI .
• 효과 후크 사용 -문서를 반응시킵니다.

React 클래스 라이프 사이클 메소드에 익숙하다면 useEffect Hook를 componentDidMount, componentDidUpdate 및 componentWillUnmount 결합으로 생각할 수 있습니다.

1. use second second parament없이 효과 : 이것은 컴포넌트가 방금 마운트되었거나 업데이트되었을 때 어떤 일이 일어나길 원할 때 사용됩니다. 개념적으로 모든 렌더링 후에 발생하기를 원합니다.

2.use as second paraments with [] : 이것은 마운트 할 때 한 번만 실행되는 경우 컴포넌트를 마운트 할 때 무언가를 원할 때 사용됩니다. 친숙한 componentDidMount 및 componentWillUnmount에 더 가깝습니다.

두 번째 매개 변수에 전달 된 일부 인수의 효과 : 이것은 pramter가 통과했을 때 무언가가 일어나기를 원할 때 사용됩니다. 귀하의 경우에 인수가 변경되었습니다.

더 많은 정보를 위해서. 여기를 확인하십시오 : https://reactjs.org/docs/hooks-effect.html

두 번째 매개 변수에 전달 된 일부 인수가있는 useEffect useEffect (() => {}, [arg])

arg가 변경되면 먼저 실행되고 다시 실행됩니다.

useEffect 내부의 반품에 대해 물어 보는 것도 잊어 버리십시오 ... 구성 요소를 분리 할 때 실행되는 정리 용도