[React] Day 18 - useEffect를 사용하여 특정 상황에서 작업 수행하기

➡️마운트/언마운트/업데이트 시 수행할 작업 설정하기

 

📌마운트/언마운트

마운트 : 컴포넌트가 나타나는 상황을 마운트라고 한다.

언마운트 : 컴포넌트가 삭제 될 때는 언마운트라고 한다.

 

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> <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}></User>

      ))}

    </div>

  );

}

export default UserList;

 

📌useEffect 사용방법

useEffect를 사용할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열을 넣습니다. 만약에 배열을 비우게 된다면, 컴포넌트가 처음 나타날때만 useEffect에 등록된 함수가 호출됩니다.

 

그리고, useEffect에서는 함수를 반환할 수 있는데 이를 cleanup 함수라고 부릅니다. cleanup 함수는 useEffect에 대한 뒷정리를 해주는 역할을 한다. 배열이 비어있는 경우 컴포넌트가 사라질때 cleanup 함수가 호출된다.

 

중간결과사진

 

➡️배열에 특정 값을 넣게된다면, 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출이 됩니다. 그리고, 배열 안에 특정 값이 있다면 언마운트시에도 호출이되고, 값이 바뀌기 직전에도 호출이 됩니다.

 

UserList.js 변경

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> <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}></User>

      ))}

    </div>

  );

}

export default UserList;

 

중간결과사진

 

📢useEffect 안에서 사용하는 상태나, props가 있다면, useEffect의 배열안에 넣어주어야 합니다.

     -> 만약 useEffect 안에서 사용하는 상태나 props를 배열에 넣지 않게된다면 useEffect에 등록한 함수가 실행될 때 최신 props 상태를 가르키지 않게 됩니다.

 

➡️useEffect의 배열에 파라미터를 생략한다면, 컴포넌트가 바뀐 내용이 없어도 리렌더링이 될때마다 호출이 된다. 

 

UserList.js 변경

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> <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}></User>

      ))}

    </div>

  );

}

export default UserList;

 

결과사진

 

📢이렇게 glgl라는 사용자를 입력하는 도중에도 자식 컴포넌트까지 리렌더링이 되어진다. 실제 DOM에는 변화가 있는 컴포넌트만 해당되지만, Virtual DOM에서는 모든것을 다 렌더링하고 있다.