우선, useEffect에 대해 얘기를 하기전에 "side effect"라는 것에 대해 짧게 정의해보고자 한다.
side effect 란??
일반적으로 React에서 side effect라 함은,
React 컴포넌트 안에서 데이터를 가져오거나 구독하고,
DOM을 직접 조작하는 작업을 일컫는다.
(이러한 sideeffect는 짧게 'effect' 라고 불려진다.)
왜냐하면, 이러한 작업들은 다른 컴포넌트에 영향을 줄 수 있고,
렌더링 과정에서는 구현할 수 없는 작업이기 때문이다.
그렇다면, 이제 원래 우리가 알고 싶어했던, useEffect에 대해 알아보자.
useEffect 란??
effectHook, 즉, useEffect는
함수 컴포넌트 내에서
위에서 설명한 side effect를 수행할 수 있게 해준다.
예를들어, fetch api를 이용하여, data를 받아오거나,
dom을 이용해 document.title을 바꾼다던지 하는 작업들을
useEffect를 이용해 해결 할 수 있다.
☑️useEffect 는 어떻게 사용하는 것일까?
위의 사진처럼, useEffect는 총 2개의 인자를 받는다.
첫 번째 인자는 callback함수.
두 번째 인자는 dependencyList(optional).
두 번째 인자로 주로 쓰는 것은
(작성하지 않는것, 빈배열([]), dependencyList)총 3가지가 있다.
✓ 만약에 두번째 인자를 작성하지 않고, 비워놓게 된다면,
위의 effect는 페이지가 렌더링 될때마다
매번 다시 시작이 되게 된다.
✓ 두번째 인자를 [ ] 빈배열로 주게 된다면,
effect는 처음 렌더링 될때 한번만 실행되게 된다.
✓ 두번째 인자를 자기가 원하는 dependencyList로 작성한다면,
해당 dependencyList가 변할때마다
useEffect가 실행되게 된다.
실 예는 아래와 같다.
두번째 인자를 dependencyList로 작성한 예.
위의 예에서는 두번째 인자로 [count]라는 상태를 입력하였다.
그러므로 이 경우 count라는 상태가 변경될때마다 useEffect가 출력되게 되고, 매번 document.title이 update되게 된다.