useEffect Hook

jini.choi·2022년 5월 20일

React

목록 보기

14/21

아래의 상황에서 어떤 특정 작업을 할 수 있다.

우리가 만든 리액트 컴포넌트가 처음 화면에 나타나거나 사라지게 될 때
컴포넌트에 어떤 props나 상태가 바뀌어서 업데이트 될 때나 업데이트 되기 전
리랜더링 될 때

컴포넌트가 처음 화면에 나타날 때 []

useEffect(() => {
        console.log('컴포넌트가 화면에 나타납니다.');
    }, []);

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

컴포넌트가 마운트될 때 주로 하는 작업은 아래와 같다.

props로 받은 값을 컴포넌트의 state로 설정
외부 API요청(REST API 등등)
라이브러리 사용(D3, vedio.js 등등)
setInterval, setTimeout

컴포넌트가 화면에서 사라질 때

useEffect(() => {
        console.log('컴포넌트가 화면에 나타납니다.');
        return () => {
            console.log('컴포넌트가 화면에서 사라집니다.');
        };
    }, []);

return

컴포넌트가 언마운트될 때 주로 하는 작업은 아래와 같다.

clearInterval, clearTimeout
라이브러리 인스턴스(D3, vedio.js 등)를 만들었을 때 제거하는 작업

props나 상태가 바뀌어서 업데이트 될 때

useEffect(() => {
        console.log(user);
    }, [user]);

useEffect에서 등록한 함수는 [user]값이 설정되거나 바뀔 때 마다 호출

props나 상태가 바뀌어서 업데이트 되기 전

useEffect(() => {
        console.log('user값이 설정 됨');
        console.log(user);
        return () => {
            console.log('user값이 바뀌기 전');
            console.log(user);
        }
    }, [user]);

userEffect에 deps배열에다가 어떤 값을 넣게 된다면 해당 값이 바뀔 때마다 등록한 함수가 호출된다. 해당 값이 바뀌기 직전에는 설정한 clean up함수가 호출

userEffect 에 등록한 함수에서 props로 받아온 값이나 useState에서 관리하고 있는 값을 참조하고 있는 경우에는 deps배열에 꼭 넣어야만 user값이 최신의 값을 가르키게된다.

deps가 비어있는 상태에서 user를 조회하게 된다면 의도하지 않은대로 작동하고 경고가 나타날 수 있다.

deps배열을 생략할 경우

useEffect(() => {
        console.log(user);
    });

모든 컴포넌트에서 useEffect가 실행되는 현상이 나타난다.

react컴포넌트에서는 부모 컴포넌트가 리랜더링되면 자식 컴포넌트도 리랜더링 된다.

실제 DOM에 변화가 반영되는 것은 바뀐 내용이 있는 컴포넌트에만 해당 되지만, Vitual DOM에는 모든 걸 다 렌더링 하고 있다는 것이다.

User컴포넌트의 부모컴포넌트는 UserList인데 UserList에서 users배열이 바뀌게 되면 UserList컴포넌트가 리랜더링 되는거고 결국에는 모든 User컴포넌트가 리랜더링 되고 있다는 것이다.

UserList.js

import React, { useEffect } from "react";

function User({ user, onRemove, onToggle }) {
    const { username, email, id, active } = user;
    useEffect(() => {
        console.log(user);
    });
    return (
        <div>
            <b 
                style={{
                    color: active ? 'green' : 'black',
                    cursor: 'pointer'
                }}
                onClick={() => onToggle(id)}
            >
                {username}
            </b>
            &nbsp;
            <span>({email})</span>
            <button onClick={() => onRemove(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;