[REACT] useEffect 사용하기

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>
  )
}

mount될 때, unmount 될 때, 어떤 효과를 넣고 싶을 때에 사용한다.

useEffect에서 콜백은 mount될 때의 상태에 발생하는 이벤트를 처리하고,

useEffect에서 return 으로 반환하는 함수는 clear함수라고 하여 unmount 될 때의 상태에서 발생하는 이벤트를 처리한다.

 

import React, { useEffect } from 'react';

function User({ user,onRemove, onToggle }) {
  const {username,email,id, active} = user;
  useEffect(() => {
    console.log('user 값이 설정됨');
    return () => {
      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>
  )
}

만약 위와 같이 deps에 (위에서 콜백 바깥의 [user] 부분) 어떤 값이 들어가 있다면,

콜백은 해당 값이 update된 이후의 상태를 반환하고,

return 이후의 함수는 update되기 전의 상태를 반환한다.

vue.js에서는 이를
- beforeMount(){}
- mounted(){}
- beforeUpdate(){}
- Updated(){}
로 설정한다.