Effect Hook

Effect Hook

함수형 컴포넌트에서 다이나믹한 데이터를 관리하기 위해 useState()를 이용하였다. Effect Hook은 렌더 후에 자바스크립트 코드를 실행하기 위해 사용한다. useEffect()는 첫번째 렌더 이후, 리렌더 이후, 함수형 컴포넌트의 마지막 렌더이후 코드를 실행하기 위해 사용된다.

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

1. useEffect 사용하기

useEffect() 함수에 전달되는 첫번째 인자로 컴포넌트 렌더 이후 리액트가 부르길 원하는 콜백함수를 전달해준다. 이 콜백함수를 effect로 부른다.

//useEffect를 사용하기 위해선 import 해줘야한다.
import React, { useState, useEffect } from 'react';
 
function PageTitle() {
  const [name, setName] = useState('');
 
  useEffect(() => {
    document.title = `Hi, ${name}`;
  });
 
  return (
    <div>
      <p>Use the input field below to rename this page!</p>
      <input onChange={({target}) => setName(target.value)} value={name} type='text' />
    </div>
  );
}

✨ useEffect() 내에 사용된 document.title 문법은 문서의 현재 제목을 구하거나 설정하는 프로퍼티이다.

✨ useEffect() 는 상태값에 접근하기 위해 useState() 이후에 호출되어야하고 Hooks는 컴포넌트 정의의 시작부분에서 사용되어야 한다.

2. clean up Effects

메모리 낭비를 피하기 위해 이벤트 리스너가 할일을 다하게 되면 제거하는 것이 중요하다. 이러한 예로 몇몇 effects는 clean up이 필요하다. (effect는 리렌더가 일어날때마다 실행되기 때문이다)

useEffect(()=>{
  document.addEventListener('keydown', handleKeyPress);
  return () => {
    document.removeEventListener('keydown', handleKeyPress);
  };
})

3. effect 한번만 호출하기

useEffect() 함수는 컴포넌트가 렌더 될때마다 첫번째 인자로 전달되는 콜백함수(effects)를 호출하게 된다. 이런 과정에서 발생하는 오류를 없애기 위해 cleanup 함수를 사용한다. effect를 컴포넌트가 처음 렌더될때(마운트 상태) 오직 한번만 실행되길 원한다면 useEffect() 함수의 두번째 인자로 빈배열을 전달해준다. (the dependency array 라고 부른다)

useEffect(() => {
  alert("component rendered for the first time");
  return () => {
    alert("component is being removed from the DOM");
  };
}, []);

4. fetch data

dependency array 에 따른 effect 호출방법

Rules of Hooks

hooks를 사용할 때에는 지켜야할 규칙 2가지가 있다.

1. top level 에서만 hooks를 호출한다. 2. hooks는 리액트 함수 컴포넌트에서만 사용한다.

리액트가 가상 돔을 설계하게 되면, 라이브러리는 유저가 UI와 상호작용할때 컴포넌트를 정의한 함수를 호출한다. 리액트는 함수컴포넌트에서 정의된 순서를 기반으로 hooks를 관리하는 함수들과 데이터를 유지한다. 이러한 이유때문에 항상 hooks는 상위레벨에서만 호출해야하며 반복문, 조건문, 네스팅 함수내에 호출하면 안된다!

✨ more hooks ... (https://reactjs.org/docs/hooks-reference.html)