useEffect

(속한 컴포넌트가) 렌더링 될 때, 특정한 작업을 수행해야 할 때 설정하는 Hook

• 컴포넌트가 화면에 보여졌을 때(mount)
• 컴포넌트가 화면에서 사라졌을 때(unmount)

 

useEffect(()=>{
  ...
})

매개변수로 콜백함수 들어 가는 형태

 

리렌더링 흐름

1. input에 값을 입력하면
2. value, 즉 state가 변경된다.
3. state가 바뀌었기 때문에, App 해당 컴포넌트가 리렌더링 됨
4. 리렌더링이 되었기 때문에 useEffect()가 다시 실행됨
5. 1~4번 순환

의존성 배열(dependency array)

이 배열에 값을 넣으면, 그 값이 바뀔때만 useEffect를 실행한다

함수가 끝나는 뒤에 두번째 배열을 넣어줌

useEffect(()=>{
  // 의존성 배열에 값이 없기 때문에 최초에 한번만 실행한다.
}, [])

useEffect(()=>{
  // value state가 바뀔때마다 실행
  console.log({value})
}, [value])

clean up

화면에서 없어질 때도 동작
return문을 함수형태로 작성해주면 컴포넌트가 죽을 때 로직이 동작한다.

useEffect(()=>{
  ...
  return () => {
    console.log('나 사라져요')
  }
}, [value])