Effect Hook_React

Effect Hook

• react class의 componentDidMount, componentDidUpdate, componentWillUnmount와 같음
• 하나의 API로 통합

useEffect

useEffect(function);
useEffect(() => {}, [count]) // 의존성 배열 (배열 안에 담긴 값들을 추적, 그때 마다 업데이트)

• 명령형 또는 어떤 effect를 발생하는 함수를 인자로 받는다
• useEffect에 전달된 함수는 화면에 렌더링이 완료된 후에 수행된다
• 뒤에 (,[])빈 배열을 전달하면 return전까지만 실행된다.
  즉 컨디마와 같다(첫실행 한번만 실행 됨)
• unMount때는 return 함수가 실행 됨

사용법

import { useEffect } from "react"

// 사용법
useEffect( 실행시킬 동작, [ 타이밍 ] )
document.addEventListener("타이밍", 실행시킬 동작) // 추상화 한 예시

// 매 렌더링마다 Side Effect가 실행되어야 하는 경우
useEffect(() => {
  // Side Effect
})

// Side Effect가 첫 번째 렌더링 이후 한번 실행 되고,
// 이후 특정 값의 업데이트를 감지했을 때마다 실행되어야 하는 경우
useEffect(() => {
  // Side Effect
}, [value])

// Side Effect가 첫 번째 렌더링 이후 한번 실행 되고,
// 이후 어떤 값의 업데이트도 감지하지 않도록 해야 하는 경우
useEffect(() => {
  // Side Effect
}, [])

useEffect(() => {
	console.log("componentDidMount + componentDidUpdate")
}) // 타이밍 정해주지 않았으므로 매 render마다 실행됨

useEffect(() => {
	console.log("componentDidMount")
	return () => console.log("componentWillUnmount")
}, []) 
// 더 이상 감지하는 state가 없으므로 한번 실행되고 그 이후에는 실행되지 않음,
// 첫 렌더 때만 실행하고 싶을 때

useEffect(() => {
	console.log("componentDidMount")
	console.log("componentDidUpdate") // + shouldComponentUpdate
	return () => console.log("???")
}, [state])
//useState에 state일 때만 실행됨

useEffect(() => {
	console.log("count change", count);
}, [count]);//count가 실행될때만 실행됨


// WRONG!!
useEffect(() => {
	fetch(`/users/${id}`)
}, [])

useEffect(() => {
	fetch(`/users/${id}`)
}, [id])

// GOOD!!
useEffect(() => {
	fetch(`/users/${id}`)
}, [id])

순서

1. 컴포넌트가 렌더링 됩니다. 최초로 진행되는 렌더링은 브라우저에 처음으로 이 컴포넌트가 보여졌다는 의미로 mount 라고 표현합니다.
2. useEffect 첫 번째 인자로 넘겨준 함수(callback)가 실행됩니다(Side Effect).
3. 다시 렌더링(re-render)이 일어납니다 (state나 props가 변경된 경우)
4. useEffect는 두 번째 인자에 들어있는 의존성 배열을 체크합니다.
   1. 만약 두 번째 인자에 아무런 값도 넘기지 않았거나 / 인자로 넘긴 배열에 들어있는 값 중 업데이트된 것이 하나라도 있다면 첫 번째 인자로 넘겨준 함수(callback)가 실행됩니다(Side Effect).
   2. 하나도 없거나 빈 배열이라면, 아무런 일도 하지 않습니다.
5. 만약 앞에서 일으킨 Effect에서 state나 props를 변경시켰다면 다시 렌더링이 일어납니다.
6. (중략...)
7. 컴포넌트가 필요 없어지면 화면에서 사라집니다. 컴포넌트가 브라우저의 화면에서 사라졌다는 의미로 unmount라고 표현합니다.

clean up

• useEffect에 대한 뒷정리를 해준다, 컴포넌트가 사라질때 cleanup 함수가 호출된다.
• useState로 한박자 늦춰질때 사용함
• 실행될때 초기화를 한 후, 다시 실행될때 리턴된 함수를 호출함

//기본 사용문법
useEffect(function(){
  실행문
  return function(){
    실행문
  }
});

//ex
const App = () => {
  const [count, setCount] = useState(0);

  console.log("render", count);

  useEffect(() => {
    console.log("useEffect Callback", count);
    return () => {
			console.log("cleanUp", count);
		});
  }, [count]);

  return <div onClick={() => setCount(count + 1)}>하잉</div>;
};

export default Foo;

//출력
    render, 0
    useEffect Callback, 0
    
    // 클릭
    
    render, 1
    cleanUp, 0
    useEffect Callback, 1