React - useEffect

useEffect란?

React에서 컴포넌트가 렌더링된 이후 특정 작업(Side effect)을 실행할 수 있도록 해주는 Hook이다. useEffect는 컴포넌트가

• Mount, 화면에 처음 렌더링 되었을 때
• Update, 업데이트 될 때(re-rendering)
• Unmount, 화면에서 사라질 때

특정 작업 처리할 코드를 실행시킨다.

Side Effect란?

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect(부수 효과)가 있다고 한다. React에서 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 말하며 대표적인 예로 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우이다.

일단 화면에 렌더링할 수 있는 것들 부터 먼저 렌더링하고 실제 데이터는 비동기로 가져오게 되는데 API 요청에 대한 응답이 늦어지거나 응답이 없을 경우 영향을 최소화 시킬 수 있기 때문에 사용자 경험 측면에서 유리하다.

사용 방법

기본 형태

useEffect(function, deps)

useEffect는 두 개의 인자를 받는다.

• function : 실행하고자 하는 함수(콜백 함수)
• deps : 종속성 배열이라 부르며 어떠한 값의 변경이 일어날 때 useEffect가 실행된다.

조건부 effect 발생 (dependency array)

1. deps를 비울 경우

useEffect(() => {
  // 실행할 내용
});

• 컴포넌트가 화면에 처음 렌더링 될 때, props와 state가 업데이트 되어 렌더링이 발생할 때마다 콜백 함수가 실행된다.

2. deps에 값을 넣을 경우

useEffect(() => {
  // 실행할 내용
}, [value]);

• 컴포넌트가 화면에 처음 렌더링 될 때, value 값이 바뀔때만 콜백 함수가 실행된다.

3. deps에 빈 배열을 넣을 경우

useEffect(() => {
  // 실행할 내용
}, []);

• 컴포넌트가 화면에 처음 렌더링 될 때만 콜백 함수가 실행된다. (처음 한번만 외부 API 호출을 통해 리소스를 받아오고 더이상 API 호출이 필요하지 않은 경우)

4. cleanup(정리) 함수

useEffect(() => {
  // 실행할 내용
  return () => { ... }
}, []);

• cleanup은 컴포넌트가 Unmount(화면에서 사라질 때)될 때 실행되는 함수이다. 예를 들어 타이머를 시작하고 멈춰야 할 때 useEffect의 return 값으로 함수(타이머가 화면에서 사라졌을때 타이머를 종료시키는 함수)를 넣어준다.

useEffect 사용 시 주의할 점

• 최상위에서만 Hook을 호출한다.
• React 함수 내에서 Hook을 호출한다.