반응 useEffect

by

Velopert 반응 + 공식 문서 배우기

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

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

  • 컴포넌트가 렌더링될 때 특정 작업을 수행할 수 있도록 해주는 후크를 후크(React 16.8에 새로 추가됨)라고 합니다.
  • useEffect() : React 구성 요소가 렌더링될 때 특정 작업(부작용)을 수행할 수 있도록 하는 React 후크입니다.
  • 부작용: 구성 요소가 렌더링된 후 비동기적으로 처리되어야 하는 부작용입니다.

기본 사용

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

출력 결과(실제 조립, 미조립 1회)


반응하다

마운트에서 수행되는 작업은 주로 다음과 같습니다.

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

그리고 분해 시 수행되는 작업은 다음과 같습니다.

  • setInterval, setTimeout(clearInterval, clearTimeout)에 등록된 작업을 지웁니다.
  • 라이브러리 인스턴스 제거

deps : 배열 유형. 기능 실행 조건

deps에 특정 값을 입력하면 구성 요소가 배포되고 지정된 값이 업데이트될 때 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의 반환 부분을 기반으로

  • 반환 전: 값 변경 전 출력
  • 반환 후 : 변경된 값 출력

다음 useEffect는 심도 있는 실습과 결합하여 작업을 이해하는 방향이어야 합니다.