[React] useEffect에 대한 해설.

이번에는 리액션의 훅스 중 하나인 useEffect에 대한 해설을 진행한다.

이른바 useEffect

함수를 첫 번째 매개 변수로 useEffect에 전달합니다.
useEffect를 사용하면 전달된 함수는 렌더기의 결과가 화면에 반영된 후에 실행됩니다.
즉, useEffect는'함수의 실행 시간을 React의 렌더링으로 늦추는 훅'을 말한다.

기본 문법

기본 문법은 다음과 같다.

useEffect(() => {
  // 第1引数には実行させたい関数を渡す
  console.log('副作用関数が実行されました！')
},[依存する変数の配列]) // 第2引数には副作用関数の実行タイミングを制御する依存配列を渡す

두 번째 매개 변수를 생략할 수 있으며, 생략할 때 구성 요소가 렌더링될 때마다 첫 번째 매개 변수에서 전달된 부작용 함수를 실행합니다.
두 번째 매개변수를 지정하여 첫 번째 매개변수로 전달되는 부작용 함수의 실행 시간을 제어할 수 있습니다.
useEffect에서 두 번째 매개 변수가 전달하는 그룹의 값이 변할 때 함수를 실행합니다.
참고로 처음 렌더링할 때 부작용 함수를 한 번만 실행하려면 두 번째 매개 변수에서 빈 의존 배열 [] 을 지정할 수 있습니다.

기타

다른 알아야 할 것은 두 가지다.

componentWillUnmount의 처리

useLayouteffect

따로따로 해설하다.
우선useEffect는 DOM 마운트 해제 (구성 요소가 보이지 않을 때) 처리를 추가하기 위해 첫 번째 매개 변수의 함수에return을 쓸 수 있습니다.
이것은 클래스 구성 요소에서 말한 component Will Unmount의 처리입니다.
또한useEffect와 비슷한 hooks는useLayouteffect가 있다.
useEffect는 화면을 묘사한 후useEffect에서 처리하고useLayouteffect는 화면을 묘사할 때useLayouteffect에서 처리합니다.

끝말

이번에는 useEffect에 대한 해설을 진행했습니다.
리액트에서 앱을 사용할 때는 100% 사용하는 기능이기 때문에 기억해야 한다.
또한 제 블로그에는 React 엔지니어가 되는 로드맵이 무료로 공개되어 있으니 참고하시기 바랍니다.백엔드 엔지니어가 되고 싶은 사람에게도 도움이 된다는 메시지가 적혀 있다.
https://hinoshin-blog.com/react-roadmap/
끝맺다