14. useEffect로 마운트, 언마운트, 업데이트 시 특정 작업 설정해보기

# useEffect 를 사용할 때에는 첫 번째 파라미터: 함수, 두 번째 파라미터: 의존 값이 들어있는 배열(deps)

만약에 deps 배열을 비우게 되면, 컴포넌트가 처음 마운트될 때에만 useEffect 에 등록한 함수가 호출된다.

​

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

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

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;

# 마운트 시 하는 작업들

- props로 받은 값을 컴포넌트의 로컬 상태로 설정

- 외부 API 요청 (REST API 등)

- 라이브러리 사용 (D3, Video.js 등)

- setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약

​

# 언마운트 시 하는 작업들

- setInterval, setTimeout 을 사용하여 등록한 작업들을 clear 하기 (clearInterval, clearTimeout)

- 라이브러리 인스턴스 제거

 

deps 에 특정 값을 넣어보기

# deps 에 특정 값이 지정되면, 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 변경될 때에도 호출된다.

또한 언마운트 시에도 호출되고, 값이 바뀌기 직전에도 호출이 된다.

​

# useEffect 안에서 사용하는 상태나, props가 있다면 deps에 넣어주어야 하는 것이 규칙이다.

만약에 넣지 않게 된다면 useEffect에 등록한 함수가 실행될 때 최신 상태나 props를 가르키지 않는다.

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 파라미터를 생략한다면, 컴포넌트가 리렌더링될 때마다 호출된다.

import React, { useEffect } from 'react';

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    console.log(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;

※ 리액트에서는 부모 컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링 된다.

실제 DOM 에는 바뀐 내용이 있는 컴포넌트만 반영되지만, Virtual DOM 에서는 모든 것을 다 렌더링하고 있는 것이다.

---

출처 : https://react.vlpt.us/basic/16-useEffect.html

16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 · GitBook