useEffect

useEffect를 사용하여 마운트 | 언마운트 | 업데이트시 할 작업 설정

useEffect 라는 Hook 을 사용하면!

• 만든 컴포넌트가 마운트 됐을 때 (처음 나타났을 때)
• 언마운트 됐을 때 (사라질 때, 삭제될 때)
• 업데이트 될 때 (특정 props가 바뀔 때)

특정 작업을 처리할 수 있다.

useEffect 불러오기

import React, { useEffect } from "react";

import React, { useEffect } from "react";

 // User라는 컴포넌트 생성.
function User({user, onRemove,onToggle}){
    const {username, email, id, active} =user; // 밑에서 user. 쓰기 번거로워서  미리 추출해서 쓰기
    useEffect(()=> {
        console.log('컴포넌트가 화면에 나타남'); 
 
        return ()=>{ 
            console.log('컴포넌트가 화면에서 사라짐');
        }
    },[]);
    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>
    );

}

코드 파헤치기

📍

useEffect(()=>{ 
		return () =>{
	}
,[])

• 첫 번째 파라미터 : 함수 등록
• 두 번째 파라미터 : [ ]
  -> [ ] (빈 배열 = Deps) - 의존되는 값을 배열안에 넣어주면 됨.
  -> 의존되는 값이 비어 있을 경우 컴포넌트가 한번 화면에 나타날 때만 실행이 됨.
  -> 조회하고 있는 값 있으면 [ ]에 넣어 주기.
  -> Deps 에 특정 값을 넣게 된다면, 컴포넌트가 처음 마운트 될 때에도 호출이 되고,
  지정한 값이 바뀔 때에도 호출 됨.
• return ()=>{}
  -> return으로 특정함수 반환하게 되면 뒷정리 함수(clearup)여서 업데이트 바로 되기 직전에 호출된다.
  -> Deps 가 비어 있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출됨.
• 안에 조회하고 있는 값이나 props가 있다면 Deps 안에 넣어줘야 함.
  
  useEffect는 컴포넌트가 나타났을 때 , 사라질 때, 업데이트 될 때 그 중간에 어떤 작업을 하고 싶을 때 사용하면 된다~!

📍

useEffect(()=>{ // 특정 값이 업데이트되고 난 직후에 실행이 됨.
        console.log('user값이 설정됨');
        console.log(user);
        return()=>{
            console.log('user 값이 바뀌기전');
            console.log(user);
        }
    },[user]); 

• ueeEffect의 Deps 배열에다가 어떤 값을 넣게 된다면 !
  -> 해당 값이 바뀔 때 마다 등록한 함수 호출됨.
  -> 해당 값이 바뀌기 직전에는 위에 설정한 cleanup함수 호출.
  -> 값이 바뀔 때도 호출이 되지만, 처음 나타날 때도 호출이 됨.
• 뎁스 안에 user를 넣지 않은 상태로 useEffect에서 user을 조회하게 된다면?
  -> 의도하지 않은 대로 작동하게 됨.
• 만약 props를 가져 온다면(함수 호출) Deps 안에도 props를 넣어줘야 제대로 작동하게 된다.

},[user]);

• user을 Deps에 넣음.
  -> useEffect에서 등록한 함수는 값이 설정되거나(마운트되거나), 바뀔때 마다 호출이 됨.

컴포넌트 마운트 될 때 추가하는 작업

• props로 받은 값을 컴포넌트의 state로 설정.
• 외부 API 요청 - REST API
• 라이브러리 사용- D3, Vedio.js
• setInterval, setTiomeout

언마운트 될 때 하는 작업

• setInterval, setTiomeout을 사용해서 등록한 작업 제거할 때
  -> 즉, clearInterval, clearTiomeout
• 라이브러리 인스턴스 제거
• 클리어 함수 , 즉 뒷정리 함수로 생각하기.
  

📌 리액트 컴포넌트는 기본적으로 부모 컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링이 된다. 바뀐 내용이 없다 할지라도!!

학습 : 벨로퍼트와 함께 하는 모던 리엑트