[모각코 6주차] React에서 useEffect를 사용하여 마운트/언마운트 관리하기

useEffect라는 Hook을 사용하여 마운트, 언마운트를 관리할 수 있다. 

 

UserList.js

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에 등록한 함수가 호출된다.

 

 

주로 마운트 시에 하는 작업들은 다음과 같다.

• props로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API 요청 (Rest API 등)
• 라이브러리 사용 (D3, Video.js 등)
• setInterval을 통한 반복작업 또는 setTimeout을 통한 작업 예약

 

언마운트시에 하는 작업들은 다음과 같다.

• setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)
• 라이브러리 인스턴스 제거

 

 

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 안에 특정 값이 있다면 컴포넌트가 처음 마운트될 때도 호출이 되고, 지정한 값이 바뀔 때도 호출이 된다. 

useEffect 안에는 사용하는 상태나, props가 있다면 useEffect의 deps에 넣어야 한다. 

 

 

 

 

 

 

출처: 벨로퍼트의 모던 리액트