이 글의 코드는 저자의 Github에서 확인할 수 있습니다.
지난글에서 useState
를 이미 살펴 보았습니다. 간단히 정리하자면 "함수형 컴포넌트에서도 state를 사용할 수 있다! 개꿀!" 이었죠? 하지만 사용만 한다고 다가 아닌것이 우리내 코딩 인생이고, 복잡한 로직을 위한 다양한 기능들을 살펴볼 필요가 당연히 있습니다. useEffect
는 그러한 기능들 중 하나로 useState
가 기존의 방식을 대체하는 것 처럼 해당 기능 역시 componentDidUpdate
와 componentDidMount
를 대신한다고 봐도 좋을 것 같습니다. 정확한 기능을 먼저 말해보자면, 리엑트 컴포넌트가 렌더링될때 자동으로 해당 함수를 호출하게 되는데, 지난글에서 설명한 Hook을 이를 통해 이해할 수 있을 것 같네요. 특정 동작이 발생하면 특정 행동을 자동으로 실행한다. 네, Hook입니다.
const UseEffectExample = () => {
const [test, setTest] = useState('initial value');