[React] React Hook _ useEffect

 

useEffect

컴포넌트의 생에 주기에 맞춰 데이터를 받아오거나 DOM을 변경하는 등의 코드를 작성할 수 있는 함수이다. 클래스 생명 주기 메서드 중 componentDidMount와 compomentDidUpdate, componentWillUnmount가 합쳐진 것을 생각하면 된다. 첫 번째 인자로 수행할 코드, 데이터 구독 등의 setup이 들어가고, 두 번째 인자는 의존성 배열로 필수값은 아니지만 어떤 변수가 변경될 때만 effect가 필요하다면 의존성 배열에 변수를 추가하면 된다.

useEffect(effect, [dependencies])

• useEffect(effect) : 렌더링 시마다 setup이 실행된다.
• useEffect(effect, []) : 컴포넌트가 최초 렌더링 되었을 때만 실행된다.
• useEffect(effect, [value1, value2]) : 최초 렌더링 시와 배열의 값 중 하나만 변경되어도 실행된다.
• useEffect(() => { return effect }) : 컴포넌트가 언마운트 될 때만 실행된다.

그 외에도 데이터를 가져올 때 효과를 추가하거나, 이전 상태 변수에 기반하여 새로운 상태 변수로 갱신하거나, 불필요한 함수의 의존성이나 객체의 의존성을 제거하거나, 서버와 클라이언트에 다른 컨텐츠를 표시하는 등의 역할을 한다.

 

 

 

주의점

 

1. 렌더링 될 때마다 실행

기본적으로 의존성 배열을 적지 않으면 렌더링마다 실행된다. 의존성 배열을 적었음에도 매번 실행된다면 의존 변수들이 렌더링 시에 변한다는 의미이므로 의존 변수들을 확인해야 한다.

useEffect(() => {
  // ...
}); // 🚩 No dependency array: re-runs after every render!

useEffect(() => {
  // ..
}, [serverUrl, roomId]);

//의존 배열이 있음에도 매번 실행된다면 의존성 배열의 상태 확인
console.log([serverUrl, roomId]);

위와 같은 문제가 발생했을 때

• 상태 변수의 값을 이전의 값을 기반으로 갱신하거나
• 불필요한 객체 또는 함수의 의존성을 제거하거나
• 가장 최신의 props와 상태 변수를 읽어

해결할 수 있다. 세 가지 방법도 문제 해결에 도움이 되지 않을 때에는, useMemo 또는 useCallback로 함수를 감싸서 해결하는 방법도 시도해 볼 수 있다.

 

 

2. 무한 재실행

effect 함수가 무한으로 재실행될 때는 effect 함수가 상태 변수를 갱신하고 있는지 또는 의존성 배열에 포함된 상태 변수가 리렌더링을 이끌어 내고 있는지 확인해야 한다. 문제점을 해결하기 전에 useEffect가 꼭 필요한지 점검도 필요하다. 외부 시스템과 연결되어 있지 않다면 해당 훅을 완전히 삭제하고 코드를 다시 정리하는 것을 추천한다.

 

 

3. 컴포넌트가 언마운트 되지 않았음에도 클린업 로직이 실행 (return문 코드)

클린업 로직은 언마운트 될 때뿐만 아니라 의존 변수들이 변경되어 리렌더링 될 때에도 실행된다. 만약 훅 내에서 코드를 대칭이 되도록 작성하지 않으면 이 같은 문제가 발생할 수 있다.

useEffect(() => {
  // 🔴 Avoid: Cleanup logic without corresponding setup logic
  return () => {
    doSomething();
  };
}, []);

// ✅ do
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);

 

 

4. 화면 깜빡임

훅이 화면을 그리는 것을 차단해야 한다면 useLayoutEffect를 대신 사용하자. 이 기능은 대부분의 경우 효에 필요하지 않은 기능이다. 사용자가 화면을 보기 전에 도구 등을 배치할 경우에만 사용한다.