[React] useEffect (parameter, clean-up)

 

 

 

▷ useEffect parameter 유무에 따른 차이

#1 두번째 인자(dependency)가 없는 경우 

function App() {
  const [isOn, setIsOn] = useState(false);

  useEffect(() => {
   fetch('http://example.com')
     .then(res => console.log(res))
  });
}

: useEffect에 인자를 넣지 않고 생략하면 state가 바뀔때마다(DOM이 변화할때마다) 무조건적으로 해당 effect를 실행

 

 

#2 두번째 인자가 빈 배열([])인 경우

function App() {
  const [isOn, setIsOn] = useState(false);

  useEffect(() => {
   fetch('http://example.com')
     .then(res => console.log(res))
  }, []);
}

: 리액트 컴포넌트가 처음 호출될 때 실행

(+ unmount 상태가 된다면 claen-up 코드가 실행)

 

 

#3 두번째 인자가 특정 state인 경우

function App() {
  const [isOn, setIsOn] = useState(false);

  useEffect(() => {
   fetch('http://example.com')
     .then(res => console.log(res))
  }, [isOn]); // isOn state가 변경될 때마다 실행됨
}

: 리액트 컴포넌트가 처음 호출될 때 실행되고, state가 변경될 때마다 실행됨

 

 

 

▷ clean-up

- 메모리 누수가 발생하지 않도록 정리하는 작업

- 함수형 컴포넌트에서는 함수를 return 하는 것으로 구현

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

 

 

 

[Reference]

1. useEffect parameter :https://stackoverflow.com/questions/55240526/useeffect-second-argument-variations-in-react-hook

2. useEffect 공식문서 : https://ko.reactjs.org/docs/hooks-effect.html