React useEffect

useEffect라는 Hook을 사용하면 컴포넌트가 마운트 됐을 때(처음 나타남), 언마운트 됐을 때(사라질 때), 그리고 업데이트 될 때(특정 props가 바뀔 때) 작업을 처리한다.

 

마운트/언마운트

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(array)를 넣는다.

만약 deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날떄에만 useEffect에 등록한 함수가 호출된다.

또 useEffect에서는 함수를 반환할 수 있는데, 이를 cleanup 함수라고 부른다.

cleanup함수는 useEffect에 대한 뒷정리를 해준다. deps가 비어있는 경우 컴포넌트가 사라질 때 cleanup 함수가 호출된다.

아래의 경우는 4개의 user 컴포넌트가 나타난 후 1번의 삭제 이벤트를 진행한 경우이다.

 

deps의 경우 2번째 인자로 넣을 수 있는데 해당 deps 주소값이 바뀔 때마다 재랜더링된다.