React Hook (useEffect)

Usestate 는 이제 어느정도 익었는데useEffect, useReduce, useContext 는 조금만 소스에서 안보면 까먹어서 따로 정리를 한다.

useEffect(didUpdate); 

명령형 또는 어떤 effect를 발생하는 함수를 인자로 받습니다.
전달된 함수는 화만에 렌더링이 완료된 후에 수행되게 된다.

기본적으로 동작은 모든 렌더링이 완료된 후에 수행됩니다만, 어떤 값이 변경되었을 때만 실행되게 할 수도 있습니다.

Cleanup 함수를 리턴하여 렌더링 후 use effect 함수 실행전 과 컴포넌트가 제거 하기전 에 실행시킬 수 있다

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);

위의 소스에서 두번째 인자 배열이 effect가 종속 된값이다. 이제 use effect 에 전달
된 함수는 해당 값이 변경될 때만 실행된다.

effect를 수행하고 (mount를 하거나 unmount 할 때) 그것을 한 번만 실행하고 싶다면 두 번째 인자로 빈 배열([])을 전달할 수 있습니다. 이를 통해 effect는 React에게 props나 state에서 가져온 어떤 값에도 의존하지 않으므로, 다시 실행할 필요가 전혀 없다는 것을 알려주게 됩니다. 이것을 특별한 경우로 간주하지는 않고, 의존성 값의 배열이 항상 어떻게 동작하는지 직접적으로 보여주는 것뿐입니다
→ useeffect는 화면이 렌더링 될 때 최초 한번은 반드시실행 되고 그후 종속 된값 변경됐을 때 실행해야하는데 애초에 값이 없으니 변경된것이 앞으로 계속 없다 •

하지만 빈배열을 전달 하는 것에는 주의사항이 필요

useEffect, useLayoutEffect, useMemo, useCallback 또는 useImperativeHandle의 마지막 인수로 종속성 목록을 지정하는 경우 콜백 내에서 사용되는 모든 값을 포함하고 React 데이터 흐름에 참여해야 합니다. 여기에는 props, state 및 그로부터 파생된 모든 것이 포함됩니다.
함수 컴포넌트 (또는 함수 컴포넌트가 호출하는 함수 컴포넌트)가 props, state 또는 파생된 값을 참조하지 않는 경우에만 종속성 목록에서 함수 컴포넌트를 생략하는 것이 안전합니다.

*참고 내용 리액트 공식사이트
https://ko.reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies