useEffect()

React에서 제공하는 useEffect() 함수는 특정 데이터가 변화할 때에만 특정 코드를 실행할 수 있게 해준다.

 

 

React의 특성상 컴포넌트(함수)내의 일부 데이터가 변화해도 컴포넌트(함수) 전체를 재 실행하여 리턴한다.

그래서 만약에 한 번만 불러와도 될 api의 경우, 사용자가 버튼 몇 번 클릭하면 api가 계속해서 호출되어 쓸데없이 리소스를 잡아먹을 수 있는 상황이 발생할 수 있다는 뜻이다.

<Fig. 1>

<Fig. 2>

(rum.. 오타있네요.. run!)

실제로 input에 글자를 치기만 하는데도 <Fig. 1> Line. 9의 console.log가 계속해서 찍히는 것을 확인할 수 있다.

 

이런경우를 방지하기 위해 React에서 제시하는 방법은 useEffect이다.

 

 

useEffect는 반환값은 없지만 두 개의 파라미터를 필요로 한다.

첫 번째 파라미터는 함수,

두 번째 파라미터는 배열(DependencyList) 이다.

 

useEffect 내의 두 파라미터의 관계는 다음 문장으로 정리할 수 있다.

처음 컴포넌트(함수)가 생성되었을 때와 배열 내의 값이 변화할 때에만 함수를 실행한다.

 

예를 들어 <Fig. 1> Line. 9에 다음의 코드를 더 추가했다고 하자.

// 1
console.log("I rum all the time");

useEffect(() => {
  // 2
  console.log("CALL THE API...");
}, []);

useEffect(() => {
  if (keyword !== "" && keyword.length > 5) {
    // 3
    console.log("SEARCH FOR", keyword);
  }
}, [keyword]);

useEffect(() => {
  // 4
  console.log("Clicking btn");
  
  // 5
  return () => {
  	console.log("component destroyed");
  };
}, [counter]);

이 때 1~5번의 함수는 다음과 같은 상황에서만 호출된다.

 

1번은 컴포넌트내 변화가 일어날 때마다 실행되는 함수,

2번은 컴포넌트가 생성되었을 때에만 실행되는 함수,

3번은 keyword가 공백이 아니거나, 길이가 5 초과인 조건하에, 컴포넌트가 생성되었을 때와, keyword의 값이 변화했을 때에만 실행되는 함수,

4번은 컴포넌트가 생성되었을 때와, counter의 값이 변화했을 때에만 실행되는 함수,

5번은 컴포넌트가 종료(파괴)되었을 때 실행되는 함수이다.

(5번의 경우에는 cleanup 함수라는 명칭도 있다.)

 

 

이처럼 useEffect의 배열 내에 종속시킬 데이터를 넣어주면 함수가 실행되야 할 타이밍을 제한할 수 있다.

 

 

더 알아보기_

Hooks API Reference – React

 

요약

---

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);