[React] useEffect를 사용하기 / 마운트, 언마운트, 업데이트

1. 마운트

React.useEffect(()=>{
	console.log("a");
},[]);

첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣는다.

위와같이 두번째 파라미터로 비어있는 배열을 넣는다면

클래스형에서 ComponentDidMount()와 마찬가지로 처음에 불러올때

중괄호 안의 함수가 실행된다.

 

 

 

2. 언마운트

cleanup함수라고 한다.

React.useEffect(()=>{
	console.log("a");
    return()=>{
    	console.log("b");
    }
},[]);

컴포넌트가 사라질 때 return안의 함수가 실행된다.

 

 

 

3. deps에 특정값 넣기

deps 에 특정 값을 넣게 된다면 아래의 상황에서 호출이 된다.

• 컴포넌트 처음 마운트될때
• 저장한 값이 바뀔때
• 언마운트 시
• 값이 바뀌기 직전

 

useEffect 안에서 사용하는 상태나, props 가 있다면,

useEffect 의 deps 에 넣어주어야 한다.

 

예시

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