Effect Hook

🔍 Pure Function

React의 함수 컴포넌트는 순수 함수(Pure Function)다. 항상 동일한 input에, 동일한 output이 나와야 하며, 항상 Props가 입력으로, JSX Element가 출력된다.

🔍 Side Effect

컴포넌트의 순수 함수적인 특징에 위배되는 기능들이다. 대표적 예시로 타이머와 데이터를 가져오는 fetch API, LocalStorage 같은 네트워크 요청이다. 즉 함수 내에서 어떠한 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다 말할 수 있다.

🔍 useEffect

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

// fetch

useEffect(() => {
  fetch(url)
    .then((res) => res.json)
    .then((data) => setState(data));
}, [])

axios는 터미널에서 npm으로 install 해주고 사용해야 한다.

npm install axios

// axios

useEffect(() => {
  axios.get(url).then(res => {
    const {data} = res;
    setState(data)
  })
}, [])

이처럼 fetch와 axios를 사용하여 API를 불러올 수 있다.

useEffect(함수, [ ])

두번째 전달인자인 종속성이 빈 배열일 경우 첫번째 전달인자인 함수를 렌더링 후 한번만 실행한다.

useEffect(함수, [state])

두번째 전달인자인 종속성 배열에 특정 상태가 있다면 첫번째 전달인자인 함수를 state가 변경될 때, 혹은 처음 컴포넌트가 렌더링 된 후 실행한다.

useEffect(함수)

두번째 전달인자인 종속성이 없으면 첫번째 전달인자인 함수를 props와 state가 변경될 때, 처음 컴포넌트가 렌더링 된 후 실행한다.