[React] Effect Hook

React에서는 Side Effect는 Effect Hook을 통해서 관리한다.

useEffect

useEffrct의 첫번째 인자는 side effect가 일어날때 실행시키고 싶은 함수를 입력한다.
두번째 인자는 첫번째 인자에서 실행 시키고자 했던 함수를 내가 원하는 때에 실행하고 싶을때를 넣어주는 조건이 담긴 배열이다. 이 배열은 종속성 배열이라고 부른다.

useEffect(함수, [종속성1, 종속성2, ...])

• 배열 내의 종속성1 또는 종속성2 배열의 값이 변할 때 첫번째 인자의 함수가 실행된다.

useEffect의 형태

1. 빈 배열 넣기

   useEffect(함수, [])

• 컴포넌트가 처음 생성될 때만 effect 함수가 실행된다. 대표적으로 처음 한번 외부 API를 통해 리소스를 받아오고 더이상 API호출이 필요하지 않을때 사용한다.

2. 아무것도 넣지 않기

   useEffect(함수)

• 컴포넌트가 처음 생성되거나 props가 업데이트 되거나, 상태(state)가 업데이트 될 때 effect 함수가 실행된다.

AJAX요청

useEffect를 이용하면 더미데이터 대신 fetch API를 이용해 데이터를 가져올 수 있다.

useEffect(() => {
  fetch(`http://서버주소/proverbs?q=${filter}`)
    .then(resp => resp.json())
    .then(result => {
      setProverbs(result); // fetch를 이용해 서버에서 데이터를 가져와 setProverbs라는 함수의 매개변수로 넣어 사용할 수 있다.
}, [filter]);