react useEffect

 

벨로퍼트 react 학습중 + 공식문서

https://ko.reactjs.org/docs/hooks-effect.html

https://react.vlpt.us/basic/16-useEffect.html

• 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 것을 Hook이라고 한다.(React 16.8버전 새로 추가)
• useEffect() : React component가 렌더링 될 때마다 특정 작업(Side effect)을 실행할 수 있도록하는 리액트 Hook
• Side effect : component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과

기본 사용법

function app(){
	useEffect(()=>{
    	console.log('mounted');
	    return ()=>{
    	  console.log('unmounted');
	    }
	})
}

출력결과(실제로는 mounted, unmouted 한번씩만 뜸)

react 실습중이라 위처럼 뜸

 

 

주로, 마운트 시에 하는 작업들은 다음과 같은 사항들이 있습니다.

• props 로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API 요청 (REST API 등)
• 라이브러리 사용 (D3, Video.js 등...)
• setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약

그리고 언마운트 시에 하는 작업들은 다음과 같은 사항이 있습니다.

• setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)
• 라이브러리 인스턴스 제거

deps : 배열 형태. function을 실행시킬 조건

deps에 특정값을 넣게 되면 컴포넌트가 mount 될 때, 지정한 값이 업데이트 될때 useEffect를 실행합니다.

 

형태

function app(){
	useEffect(()=>{
    	// 함수 처리부분
	    console.log('user 값이 설정됨');
	    console.log(user);
	    return ()=>{
        // cleanup - unmount - 이벤트삭제
	      console.log('user가 바뀌기전..');
	      console.log(user);
	    }
	  },[user])
	  // [user] => deps
      // 빈 배열을 입력할 경우 컴포넌트가 Mount 될때에만 실행
  }

얘도 벨로퍼트 실습하니깐

vue로 비교하면 watch()와 비슷 한거 같다....?

 

나중에 기억하기 쉽게 
useEffect에 return부분을 기준으로

• return 이전 : 값이 바뀌기전 출력
• return 이후 : 값이 바뀐걸 출력

다음 useEffect는 좀더 심화된 실습이랑 같이 이해하는 작업으로 가야겠음 ㅇㅇ