useEffect

useEffect

• 컴포넌트가 렌더링될 때마다 수행할 작업을 설정하는 Hook이다.
• ComponentDidMount와 ComponentdidUpdate를 합친 형태이다

ComponentDidMount & ComponentdidUpdate

react lifecyle
라이프 사이클을 참고

• componentDidMount
  컴포넌트가 마운트된 직후에 호출됨
  외부에서 데이터를 불러올 때, 네트워크 요청을 보내는 위치
• ComponentDidUpdate
  갱신이 일어난 직후에 호출됨(최초 렌더링에서는 호출되지 않음)
  이전과 현재의 props를 비교하여 네트워크 요청을 보내는 작업을 할 때 사용
• componentWillUnmount
  컴포넌트가 마운트 해제되어 제거되기 직전에 호출
  이 메서드 내에서 타이머 제고, 네트워크 요청 취소, componentDidMount()내에서 생성된 구독 해제 등

  useEffect

  ComponentDidMount, ComponentDidUpdate 공통점은 state를 사용할 수 있는고 렌더링 될때 사용하는 것이다.
• 마운트될 때만 실행 : useEffect의 두 번째 파라미터에 비어있는 배열을 넣어준다.(ComponentDidMount와 비슷한 역할)

useEffect(()=>{
	console.log('마운트될 때만 실행');
}, []);

• 특정 값이 업데이트될 때만 실행 : useEffect의 두 번째 파라미터 배열에 특정 값의 변수를 넣어준다.
  (ComponentDidUpdate와 비슷한 역할)

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