[JavaScript] React - useEffect 를 사용한 마운트, 언마운트 업데이트 시의 작업

React

useEffect

useEffect를 사용하여 마운트, 언마운트 업데이트 시의 작업을 설정해 보도록 하겠습니다.
이전 블로그에서 작성했던 코드에서 추가로 작성하여 useEffect를 사용하여 어떻게 동작하는지 확인해봅시다.
useEffect(() => {1}, [2]) ---->> 1번인 첫번째 파라미터에는 함수, 2번인 두번째 파라미터에는 deps 배열

deps가 빈 배열일 경우,

import React from 'react'				 // <UserList.js>

function User({ user }) {	
  const {username, email, id, active}= user;
   useEffect(() => {
        console.log("컴포넌트가 화면에 나타남");
        // 업데이트, 수정 한다고 해서 호출되지 않는다.
        // props -> state, REST API, 라이브러리를 사용할 때, 
     	// setInterval, setTimeOut 작업을 여기서 처리할 수 있다.
        return () => {
            console.log("컴포넌트 사라짐")
        // 컴포넌트가 사라질때 특정 작업을 하는 방법은 return을 사용하여 반환해주면 됩니다.
        // clearInterval, clearTimeout, 라이브러리 인스턴스 제거 같은 
        // 작업은 여기서 할 수 있다.
        }
    }, [])
    // 빈 배열을 넣는 것은 deps라고 부르는데
    //의존되는 값들을 넣어주는겁니다.
    return (
        <div>
            <b style={{
            color: active ? "green" : "black",
            cursor: "pointer"
            }}
            onClick={()=> onToggle(id)}

            {username}
            </b> 
            <span>{email}</span>
            <button onClick={()=>   onRemove(id)}>삭제</button>
        </div>
    )
}```

deps가 빈 배열이 아닐 경우,

import React from 'react'				 // <UserList.js>

function User({ user }) {	
  const {username, email, id, active}= user;

    // useEffect함수에서는 첫번째 파라미터는 함수, 두번째 파라미터는 deps 배열을 등록합니다. 
    // 그리고 return으로 특정 함수를 반환하면 뒷정리 함수로써 업데이트 되기 전에 호출하게 됩니다.
    // 조회하고 있는 상태나 프롭스 값이 있다면 deps에 넣어주어야 합니다.
    useEffect(()=> {
        console.log("user값이 설정됨", user);
    // useEffect에 등록한 함수는 특정 값이 업데이트 되고 난 직후에 실행됩니다.
    // 상태가 렌더, 추가되거나 업데이트 되면 실행됩니다.
        return () => {
            console.log("user값이 바뀌기 전", 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>
    )
}

• fastcampus 벨로퍼트님 리액트 강의자료를 공부하며 정리하며 작성하였습니다.