Effect Hook[2021.09.07]

1. Side Effect

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우를
해당 함수는 Side Effect가 있다

* React 컴포넌트에서의 Side Effect
  - 타이머 사용 (setTimeout)
  - 데이터 가져오기 (fetch API, localStorage)

2. Effect Hook

useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook

* 매 번 새롭게 컴포넌트가 렌더링될 때 Effect Hook이 실행
  - 컴포넌트 생성 후 처음 화면에 렌더링(표시)
  - 컴포넌트에 새로운 props가 전달되며 렌더링
  - 컴포넌트에 상태(state)가 바뀌며 렌더링
  
* 주의사항
  - 최상위에서만 Hook을 호출합니다.
  - React 함수 내에서 Hook을 호출합니다.
  
  
  
useEffect의 첫번째 인자는 함수, 두번째 인자는 조건을 담은 배열

  const [proverbs, setProverbs] = useState([]);
  const [filter, setFilter] = useState("");
  const [count, setCount] = useState(0);

  useEffect(() => {
    const result = getProverbs(filter);
    setProverbs(result);
  }, [filter, count]);
  
  
useEffect(함수, [종속성1, 종속성2, ...])

useEffect의 두 번째 인자는 종속성 배열이며 배열 내의 종속성1, 
또는 종속성2의 값이 변할 때, 첫 번째 인자의 함수가 실행된다.
배열 내의 어떤 값이 변할 때에만, (effect가 발생하는) 함수가 실행

* useEffect가 한번만 실행되게 하려면?
  - 두번째 인자에 [] 빈 배열을 넣는다.
  - 두번째 인자에 아무것도 없지 않으면 useEffect는 컴포넌트가 처음 
    생성되거나, props가 업데이트되거나, 상태(state)가 업데이트될 때
    effect 함수가 실행됨