124. useEffect 요약

강의 대본

 

useEffect는 useState 외에

가장 중요한 리액트 훅입니다

따라서 확실히 이해해야 합니다

따라서 다시 한 번 분명히 말씀드리겠습니다

언제 useEffect의 어떤 부분이

시작되고 실행되는지에 대해서요

이를 위해 다시 여기 Login 컴포넌트에서

새로운 useEffect 호출을 추가하겠습니다

여기에는 첫 번째 인수만 추가합니다

즉, 지금은 두 번째 인수는 없습니다

여기에서 "이펙트 실행"이라는

로그를 기록해 봅시다

지금은 의존성에 대한

정보는 없습니다

이 첫 번째 인수만 있죠

이렇게 사용해도 됩니다

물론 이펙트를 이런 식으로는 거의 사용하진 않지만요

그 이유는 새로고침하면

컴포넌트가 처음 마운트되었을 때 실행되는 것을 볼 수 있습니다

즉 이 로그인 컴포넌트가 처음으로 렌더링될 때죠

또한 state가 업데이트될 때마다 실행됩니다

예를 들어 여기 안을 클릭하고 저기 밖을 클릭하면

"이펙트 실행"이 표시됩니다

키를 입력할 때마다 "이펙트 실행"이 표시됩니다

즉 이것은 이 컴포넌트 함수가

다시 실행될 때마다 실행됩니다

왜냐하면 앞에서 배웠듯이, 이 이펙트 함수는

모든 컴포넌트 렌더링 주기 후에 실행되기 때문이죠

그 이전도 아니고 도중도 아니고 이후입니다

이 컴포넌트가 처음 마운트된 때를 포함해서요

이제 빈 배열을 추가하면 바뀌는데요

이제 이 함수는

이 컴포넌트가 처음으로 마운트되고 렌더링될 때만 실행됩니다

그러나 그 이후에는, 이후의 렌더링 주기에는 실행되지 않습니다

그래서 여기에 "이펙트 실행"은 표시되지만

키를 입력하는 경우에는, 표시되지 않습니다

이제 로그인해도 다시 표시되지 않습니다

정말로 한 번만 실행된 거죠

또한 의존성을 추가할 수 있는데요

enteredEmail이나 enteredPassword 같은 거요

이제 이 함수는

컴포넌트가 재평가될 때마다 재실행됩니다

그리고 이 state가 변경될 때마다요

이제 로그아웃했다가 다시 로드하면

"이펙트 실행"이 표시됩니다, 처음으로 마운트되었을 때죠

그러나 이메일 칸에 키를 입력해도 아무 것도 변경되지 않습니다

비밀번호 칸에 키를 입력하면 "이펙트 실행"이 표시되죠

왜냐하면 비밀번호는 의존성이기 때문입니다

클린업 함수도 배웠었죠, 반환할 수 있는 거였는데요

이 클린업 함수는, 이 state 함수가 전체적으로

실행되기 전에 실행됩니다

그러나 처음 실행되기 전에는 실행되지 않습니다

여기서 다시

"이펙트 클린업"이라고 로그를 기록해 봅시다

저장하고요

그러면 "이펙트 실행"만 표시됩니다

첫 번째 렌더링 주기의 경우, 이메일의 경우에는 아무 일도 일어나지 않습니다

이건 다른 클린업 로그죠

이것은 다른 이펙트에서 온 것입니다

"이펙트 클린업"은 아직 출력되지 않았습니다

하지만 일단 비밀번호를 입력하기 시작하면

"이펙트 클린업"이 트리거되는 것을 볼 수 있습니다

이펙트 함수가 실행되기 전에 트리거되죠

만약 여기에 빈 배열이 있다면, 의존성이 없다면

"이펙트 실행"은 한 번만 표시됩니다

이 경우 클린업 함수는

컴포넌트가 제거되면 실행됩니다

따라서 이 경우에는 예를 들어

로그인하고 컴포넌트가 DOM에서 제거되면

"이펙트 클린업"이 표시됩니다

이것이 useEffect가 작동하는 방식입니다

그것의 다른 부분들이 어떻게 관련되어 있는지

언제 실행되는지는

반드시 이해해야 합니다

따라서 지금 100% 분명히 이해하지 못했다면

확실히 이해하기 위해

지난 강의들을 다시 들어보세요