2021-05-21 :: useEffect

이번 글을 통해 useEffect 라는 Hook을 사용하여 컴포넌트가 마운트 되었을 때, 언마운트 되었을 때, 그리고 업데이트 될 때 특정 작업을 처리하는 방법에 대해 알아보겠다.

 

Mount/Unmount

우선 마운트/언마운트를 관리해보자.

import React, { useEffect } from 'react';

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);
  return (
    <div>
      <b
        style={{
          cursor: 'pointer',
          color: user.active ? 'green' : 'black'
        }}
        onClick={() => onToggle(user.id)}
      >
        {user.username}
      </b>
      &nbsp;
      <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
    </div>
  );
}

function UserList({ users, onRemove, onToggle }) {
  return (
    <div>
      {users.map(user => (
        <User
          user={user}
          key={user.id}
          onRemove={onRemove}
          onToggle={onToggle}
        />
      ))}
    </div>
  );
}

export default UserList;

useEffect를 사용할 때는 첫 번째 인자로 함수, 두 번째 인자로 의존값이 들어있는 배열(deps)을 넣는다. 만약에 deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날 때에만 useEffect에 등록한 함수가 호출된다. 

그리고, useEffect에서는 함수를 반환할 수 있는데 이를 cleanup 함수라고 부른다. cleanup함수는 useEffect에 대한 뒷정리를 해준다고 이해하면 된다. deps가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출된다.

deps에 특정 값 넣기

import React, { useEffect } from 'react';

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    console.log('user 값이 설정됨');
    console.log(user);
    return () => {
      console.log('user 가 바뀌기 전..');
      console.log(user);
    };
  }, [user]);
  return (
    <div>
      <b
        style={{
          cursor: 'pointer',
          color: user.active ? 'green' : 'black'
        }}
        onClick={() => onToggle(user.id)}
      >
        {user.username}
      </b>
      &nbsp;
      <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
    </div>
  );
}

function UserList({ users, onRemove, onToggle }) {
  return (
    <div>
      {users.map(user => (
        <User
          user={user}
          key={user.id}
          onRemove={onRemove}
          onToggle={onToggle}
        />
      ))}
    </div>
  );
}

export default UserList;

이번에는 deps에 특정 값을 넣어보겠다. deps에 특정 값을 넣으면, 컴포넌트가 처음 마운트될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출이 된다. 그리고, deps 안의 특정 값이 있다면 언마운트시에도 호출이되고, 값이 바뀌기 직전에도 호출이 된다.

useEffect안에서 사용하는 상태나, props가 있다면 useEffect의 deps에 넣어주도록 하자. 그게 규칙이다. 만약 useEffect 안에서 사용하는 상태나 props를 deps안에 넣지 않으면 useEffect에 등록한 함수가 실행될 때 최신 props상태를 가르키지 않게 된다.

 

useMemo는 특정 결과값을 재사용 할 때 사용한다.

useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다.

 

https://rinae.dev/posts/a-complete-guide-to-useeffect-ko