Effect Hook

# useEffect는 컴포넌트내에서 side effect를 실행할수있게하는 hook이다.(결과에 영향을 준다. 값을 변경한다.)

#useEffect의 첫번째 인자는 함수이다.
해당 함수 내에서 side effect를 실행하면 된다.
*언제실행되나?
-컴포넌트 생성후 처음 화면에 렌더링(표시
-컴포넌트에 새로운 props가 전달되며 렌더링
-컴포넌트에 상태(state)가 바뀌며 렌더링
이와 같이 매번 새롭게 컴포넌트가 렌더링될때 effect hook이 실행된다.
#주의할점
-최상위에서만 hook을 호출한다.
-리액트 함수 내에서 hook을 호출한다.

#useEffect의 두번째 인자는 종속성 배열이다. 이 배열은 조건을 담고있다. 조건은 boolean형태의 표현식이 아닌, 어떤 값의 변경이 일어날때를 의미한다.
따라서 해당 배열엔 어떤 값의 목록이 들어간다.
-useEffect(함수, [종속성1, 종속성2, ...]) = useEffect(이펙트함수, 의존성배열) 의존성배열중 하나라도 값이 변하면 이펙트함수가 실행된다!
배열내의 종속성1, 또는 종속성2의 값이 변할때 첫번째 인자의 함수가 실행된다. !!!!!!!!

-두번째 배열을 빈배열로 둘경우  useEffect(함수, []): 제일처음 한번만 실행해라(컴포넌트 렌더링후 한번실행)
컴포넌트가 처음 생성될때만 effect함수가 실행된다. 대표적으로 처음 단 한번, 외부 API를 통해 리소스를 받아오고 더이상 API호출이 필요하지 않을때에 사용.

-아무것도 넣지 않았을때   useEffect(함수)
기본형태의 useEffect는 컴포넌트가 처음 생성되거나, props가 업데이트되거나, 상태(state)가 업데이트될때 effect함수가 실행된다.
(컴포넌트 업데이트시마다 실행됨)

---

#element가 렌더링 되고 나서 effect가 커밋된다.

 

1. 빈배열이면: useEffect(함수, [])

=> 컴포넌트 렌더링후 한번실행

2. 아무것도 넣지 않았을때: useEffect(함수)

=> 처음 컴포넌트가 렌더링되고난후 / props가 변경될때/ state가 변경될때

3.특정상태가 있다면 : useEffect(함수, [state])

=> 처음 컴포넌트가 렌더링되고난후/ state가 변경될때

---

#fetch API를 써서 서버에 요청한다면

useEffect(() => {
  fetch(`http://서버주소/proverbs?q=${filter}`)
    .then(resp => resp.json())
    .then(result => {
      setProverbs(result);
    });
}, [filter]);