[React] useEffect

useEffect는 함수 실행 시 함수 외부의 상태를 변경하는 연산하는 부수효과 기능을 해준다.
useEffect로 전달되는 함수는 지연 이벤트 동안에 레이아웃 배치와 그리기를 완료한 후 발생을 한다. 대부분에 작업이 브라우저에서 화면을 업데이트 하는 것을 차단해서는 안 되기 때문에 적합한 기능이다.
API 호출하는 것과 이벤트 처리 함수를 등록하고 해제할 때 주로 사용이 된다.

effect 함수에서 참조 되는 모든 값은 의존성 값의 배열에 드러나야 하기에, 나중에는 충분히 발전 된 컴파일러가 이 배열을 자동적으로 생성 할 수 있을 것이다.

useEffect에 기본적인 구조는 다음과 같다.

useEffect(() => {
	// 작업
})

다음과 같은 구조는 렌더링이 진행 될 때 마다 콜백이 실행이 된다.

useEffect(() => {
  	// 작업
}, [value]) 

매번 렌더링이 될 때 실행되는게 아닌 화면에 첫 렌더링이 될 때 실행이 이루어지고 이후 배열 안에 value가 바뀔때만 실행이 된다.

소스코드