[공식 문서 정리] Effect Hook 사용하기

https://ko.reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React

번역본

https://medium.com/@dayong/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85-react-hooks-3-useeffect-6b781a6c6769

리액트 훅(React Hooks) #3 useEffect😃 /공식 문서 번역

*공식 문서를 기반으로한 정리 입니다.

useEffect(()=>functionA)

useEffect는 함수의 rendering이 끝난후 이후 즉 DOM이 업데이트 된 이후 실행된다. 예를 들어보자

 import React, { useEffect } from 'react';
import './App.css';

function App() {
  const [count, setCount] = React.useState(0);
  console.log('rendering')
  useEffect(() => {
    console.log('useEffect 실행');
    document.title = `You clicked ${count} times`;
  });

  return (
    <div className="App">
    </div>
  );
}

export default App;

위와 같은 코드를 실행시 콘솔창에

r

과 같은 결과가 나오게된다.

*clean up : useEffect는 기본적으로 그들을 다루기 때문에 업데이트를 따로 하지않는다. 그래서 버그를 방지하기 위해 다음 effect가 적용되기전에 이전 effect를 뒷정리한다. 하지만 이를 여러번 할 시 효율이 하락한다.

So~ useEffect(()=>, [] )를 사용하면 된다.

useEffect(()=>function, [A, B])

useEffect(()=>function, [a, b])를 사용하게되면 rendering을 하고 나서 a와 b의 값을 이전값과 비교하게된다. 이때 값이 달라지게 된다면 useEffect를 싱행하도록한다.

useEffect(()=>function, [])

[]를 보게되면 아무값도 존재하지 않는다. 즉 비교할값이없다. 그래서 처음에만 실행이 되고 이후 실행이 되지않는다.