useEffect

useEffect?

컴포넌트가 화면에 처음 렌더링될 때(mount), 다시 렌더링될 때(update), 화면에서 사라질 때(unmount) 특정 작업을 처리할 수 있도록 하는 React Hook이다.

useEffect 구성 요소

• useEffect는 총 1~2개의 매개변수를 받는다.
• 첫 번째 매개변수에는 콜백함수(callback)가 들어간다.
• 두 번째 매개변수에는 원하는 렌더링에 따라 선택적으로 의존성배열(dependency array)이 들어간다.

콜백함수 내부에는 렌더링될 때에 우리가 원하는 작업을 처리해줄 코드를 작성하면 된다.

의존성배열에 따른 렌더링 살펴보기

• 배열을 설정하지 않은 경우(매개변수가 한개)
  컴포넌트가 처음 화면에 렌더링될 때, 리렌더링될 때마다 함수가 호출된다.

useEffect(() => {
  console.log('렌더링🎨');
})

• 빈 배열을 설정한 경우
  컴포넌트가 처음 화면에 렌더링 되었을 때에만 함수가 호출된다.

useEffect(() => {
  console.log('렌더링🎨');
})

• 배열 안에 특정 값을 넣은 경우
  컴포넌트가 처음 화면에 렌더링될 때, 특정 값이 변경될 때에만 함수가 호출된다.

useEffect(() => {
  console.log('렌더링🎨');
}, [value])

cleanup함수 - 정리 작업

useEffect는 함수를 return할 수 있다. 이걸 cleanup 함수라고 한다.

useEffect(() => {
  // 구독..
  return () => {
    // 구독 해지..
  }
}, [])

위처럼 cleanup 함수를 리턴하면, 해당 컴포넌트가 unmount될 때 혹은 다음 렌더링 시 불릴 useEffect가 실행되기 이전에 cleanup 함수가 실행된다.

별코딩유튜브