React - Effect Hook

Hook의 2가지 규칙

최상위(at the Top Level)에서만 Hook을 호출해야 한다
오직 React 함수 내에서 Hook을 호출해야 한다.

useEffect의 3가지 형태

1. 아무것도 넣지 않기(기본 형태) - useEffect(함수)

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

2. 빈 배열 넣기 - useEffect(함수, [])

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

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

배열 내의 종속성1, 또는 종속성 2의 값이 변할 때 함수가 실행된다. 즉, 배열 내의 어떤 값이 변할 때에만 함수가 실행된다.

AJAX 요청 보내기

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

로딩 화면(loading indicator)의 구현

모든 네트워크 요청이 항상 즉각적인 응답을 가져다 주는 것은 아니다. 외부 API 접속이 느릴 경우를 고려하여, 로딩 화면의 구현은 필수적이다.

const [isLoading, setIsLoading] = useState(true);

// 생략, LoadingIndicator 컴포넌트는 별도로 구현했음을 가정합니다
return {isLoading ? <LoadingIndicator /> : <div>로딩 완료 화면</div>}

fetch 요청의 전후로 setIsLoading을 설정해 주어 보다 나은 UX를 구현할 수 있다.

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

hustle-ing