React- useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기

※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

- useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법 -

 

1. 마운트 / 언마운트

 

UserList.js(파일명)

import React, {useEffect} from 'react';

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

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

export default UserList;

 

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

그리고 useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup 함수라고 부르는데

cleanup 함수는 useEffect 에 대한 뒷정리를 해준다고 이해하시면 된다.

deps 가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출 된다.

 

실행 결과

화면에 컴포넌트가 마운트 됬을 때 코드에 출력 하라고 적어둔 ' 컴포넌트가 화면에 나타남'이 콘솔창에 출력 되는 것을 확인 할 수 있다.

 

또한 화면의 3개의 컴포넌트 중 마지막 컴포넌트를 삭제 하니 컴포넌트가 언마운트 되서 콘솔창에 '컴포넌트가 화면에서 사라짐'이라고 출력 되는 것을 볼 수 있다.

 

 

 

2. deps 에 특정 값 넣기

import React, {useEffect} from 'react';

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

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

export default UserList;

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

 

실행 결과

컴포넌트가 처음 마운트 될 때 호출됨

 

 

새로운 컴포넌트가 추가 될 때 호출되고 수정 될시에도 호출 되고 삭제 될 때에도 호출 되는 것을 볼 수 있다.