[React] useEffect 정리

1. useEffect 란?

• React component가 새로 렌더링 될 때마다 특정 작업(Side Effect)를 실행할 수 있도록 하는 React Hook이다.
  Side Effect : React component가 화면에 렌더링된 이후 비동기로 처리되어야하는 부수적 효과들을 뜻 한다. 
• useEffect는 component가 mount, unmonut, update 됐을 때 특정 작업을 처리할 수 있다.
• useEffect를 공부하기 전에 사전에 React component의 Lifecycle method 개념을 찾아보면 이해하기 편하다.
• 요약하면 리액트 컴포넌트가 새로 랜더링 된다면 특정 작업을 실행 시켜주는 기능이다.

 

2. 사용법

• useEffect의 기본형태는 다음과 같다.

useEffect(function , deps)

• function : 수행하고자 하는 작업 ( 실행할 함수 )
• deps : 배열 형태로 배열안에 검사하고자 하는 값

 

• React에서 제공 내장 라이브러리 api 함수로 우선 사용을 위해 import 한다.

import { useEffect } from 'react';

 

 

• 기본적으로 작성하면 렌더링 될때마다 실행하게 된다.
• 만약 처음 렌더링 될 때 한번만 실행되게 하고 싶다면 deps에는 빈 배열을 넣는다.

useEffect(()=> {
     console.log("렌더링 마다 실행 ")
},)


useEffect(()=> {
     console.log("렌더링되면 한번만 실행 ")
},[])

 

 

• 컴포넌트가  업데이트 될 때(특정 props , states가 달라질 때) 실행되고 싶다면 다음과 같이 작성한다.

useEffect(()=> {
	console.log("props 또는 state 값이 달라지면 호출됩니다. ")
},[props(변경되는값)])

 

• 컴포넌트가  unmonut 될 때 ( 사라질 때 ) 실행하려는 방법으로는 clean-up 함수를 이용한다.
• clean-up function : useEffect() 함수의 return 값으로 콜백 함수를 설정하면 Component가
  unmount or update 되기 직전에 실행되는 함수를 말한다.
• unmonut 될 때만  clean-up 함수를 실행하고 싶다면 deps에 빈 배열을 넣으면 된다.
• 특정 값이 업데이트되기 직전  clean-up 함수를 실행하고 싶다면 deps에 특정 값을 넣는다. 

useEffect(()=> {
        console.log("props 또는 state 값이 달라지면 호출됩니다. ")
  return console.log("이 부분이 clean-up function 입니다.")
},)


useEffect(()=> {
        console.log("props 또는 state 값이 달라지면 호출됩니다. ")
  return console.log("언마운트에만 실행되는 clean-up function 입니다.")
},[])


useEffect(()=> {
        console.log("props 또는 state 값이 달라지면 호출됩니다. ")
  return console.log("A 값이 업데이트 될때 실행되는 clean-up function 입니다.")
},[A])

 

 

3. 기타

• useEffect를 쓰는 이유는 코드가 실행되는 시점이 html이 렌더링 후 동작한다는 점에 있다.
• 렌더링이 전부 완료된 후 복잡한 연산 또는 서버와의 통신 작업을 실행하면 최적화 면에서 더 좋은 방향으로 갈 수 있다.