REACT, Effect Hook, Side Effect

---

Effect Hook  

 

Side Effect  ✔️

Side Effect(부수 효과)는 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우의 해당 함수를 말한다.

 

순수 함수(Pure Function)는 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 말한다.
이 경우는 Side Effect가 발생되지 않는다.

그렇다면, Side Effect가 발생되는 경우는 언제일까?

 

fetch를 이용해 외부 데이터를 받아오는 경우
LocalStorage에서 데이터를 받아오는 경우
setInterval, setTimeOut을 사용하는 경우 // 타이머 사용
useEffect는 컴포넌트 내에서 Side Effect를 실행할 수 있게 하는 Hook이다.

최상위에서만 Hook을 호출한다.
React 함수 내에서 Hook을 호출한다.

 

useEffect(() => {
    console.log("useEffect 실행");
    const result = getWords(filter);
    setWords(result);
  }, [filter]);

useEffect의 첫번째 인자는 함수, 두번째 인자는 종속성 배열이 온다.

 

이 때 빈 배열을 넣으면 컴포넌트가 처음 생성될 때에만 한 번 실행된다.

두번째 인자로 아무것도 넣지 않으면 컴포넌트가 처음 생성되거나, props가 업데이트되거나, state가 업데이트 될 때 
effect 함수가 실행된다.

---