[React] useEffect 개념

[React] useEffect 개념

useEffect 개념

이번 게시글에서는 새로운 hook useEffect에 대해 알아보겠습니다.

useEffect는 기본 hook으로 react의 life cycle을 확인할 수 있습니다.

해당 hooks은 잘 사용하면 좋지만 그렇지 않은 경우 버그를 유발하는 hook이 될 확률이 높습니다.

이번 게시글에서 한번 알아보겠습니다.

전체 코드 보러 가기 : 링크

 

◆ useEffect - React life cycle

react에서는 마운트, 언마운트 개념이 있습니다.

간단하게 설명하면 아래와 같습니다.

마운트 : 컴포넌트가 생길 때

언마운트 : 컴포넌트가 사라질 때

라고 생각하시면 편합니다.

그럼 useEffect로 마운트, 언마운트를 더 자세히 알아보겠습니다.

 

아래 코드를 확인해봅시다.

위 코드를 보시면 마운트, 언마운트 시점을 어떻게 확인할 수 있는 지 알 수 있습니다.

그런데 언마운트는 출력이 되지 않은 것을 볼 수 있습니다.

Lifecycle 컴포넌트가 생기고나서 사라지지 않았기 때문입니다.

그렇다면 어떻게 사리지게 할 수 있을까요?

그것은 부모 컴포넌트에서 해결할 수 있습니다.

아래 코드를 확인해봅시다.

Lifecycle2 컴포넌트를 보면 visible state가 있습니다.

해당 state를 변경하여 마운트 언마운트를 시켰습니다.

visible 값이 true이면 Component 컴포넌트를 보여주고 (마운트)

visible 값이 false이면 Component 컴포넌트를 없앴습니다 (언마운트).

따라서 위 결과 이미지를 보면 true일 때 마운트, false일 때 언마운트가 출력됩니다.

 

아주 간단하게 react lifecycle을 알아보았습니다.

그런데 위 설명을 보고 이런 궁금증은 드셨나요?

useEffect는 언제 호출이 될까요?

return 해주는 element들이 먼저 될까요? useEffect 호출이 먼저 될까요?

이것도 간단하게 직접 코드로 확인할 수 있습니다.

위 결과 이미지를 보면 출력이 먼저 호출되는 것을 볼 수 있습니다.

따라서 return이 먼저 되고 useEffect가 호출되는 것을 확인할 수 있습니다.

별거 아닌 것 같지만 react에서 실행 순서는 매우 중요하니 이해(+암기) 하시길 바랍니다.

◆ useEffect - dependency, 종속성 배열

위 useEffect 2번째 인자로 빈 배열을 주고 있습니다.

이것이 무엇이고 왜 사용하는 지 알아보도록 하겠습니다.

헤당 배열은 종속성 배열로 언제 useEffect가 실행될 지 설정해주는 배열입니다.

빈 배열인 경우 마운트 언마운트인 시점에만 호출이 됩니다.

더 쉽게 말하면 컴포넌트가 생길 때, 사라질 때만 호출이 됩니다.

따라서 해당 useEffect에서는 event 등록, 삭제를 하는 경우가 많이 있습니다.

(+ 다음 게시글 실습에서 확인)

 

그렇다면 언제 배열을 채워야 할까요?

위에서 언급하였지만 useEffect가 언제 실행되면 좋을 지 그 값을 넣어주는 것입니다.

간단하게 예를들면 count state 홀수일 때마다 DB에 데이터를 추가한다고 해봅시다.

(+ 개념 설명을 위한 예시)

이러한 경우 아래와 같이 사용할 수 있습니다.

count 값이 변경될 때마다 useEffect가 실행되는 것을 확인할 수 있습니다.

이렇게 특정 값이 변경될 때마다 실행시켜주고 싶을 때 의존성 배열을 사용합니다.

만약 의존성 배열을 사용하지 않으면 어떻게 될까요?

아래 코드를 확인해봅시다.

count 값이 변경이 되었지만 useEffect는 다시 호출되지 않습니다.

즉 해당 useEffect는 count state가 변경이 되었는 지 모르기 때문입니다.

따라서 useEffect에서 사용하는 외부의 값들은 꼭 의존성 배열에 넣어주어야 합니다.

(+ 개발자가 의도한 경우이면 안넣어도 문제는 없다.)

(+ 그러나 그 경우 해당 로직을 useEffect에서 사용했어야 했나를 생각해봐야 한다.)

 

그렇다면 의존성 배열이 없는 경우는 어떻게 될까요?

아래 코드를 확인해봅시다.

위 결과에서 볼 수 있듯이 렌더링이 될 때마다 실행이 됩니다.

그렇다면 의존성 배열에 count를 추가하면 어떻게 될까요?

의존성 배열에 [count]를 직접 추가해서 실행해보세요.

정답만 말하면 이것도 count가 변경될 때마다 실행이 됩니다.

그럼 의문이 드는 것이 위에서 return () => {} 은 언마운트에만 실행된다고 했는데 왜 될까요?

그건 잘못 이해하신 것입니다.

위 글을 다시 보면 알 수 있듯이 빈 배열의 경우에만 마운트 1번, 언마운트 1번 실행됩니다.

이것은 보통 같은 useEffect에서 실행한 작업을 정리할 때 사용한다고 생각하시면 됩니다.

(ex, 이벤트 삭제 및 정리 등)

이것도 중요한 내용이니 이해(+암기)할 필요가 있습니다.

◆ useEffect 여러 개 실행

이때까지 useEffect 1개만 보았습니다.

그러나 useEffect를 여러 개 실행하면 어떻게 될까요?

그리고 순서는 어떻게 될까요?

아래 코드를 확인해봅시다.

useEffect가 순서대로 실행되는 것을 확인할 수 있습니다.

이것도 중요한 내용이니 이해(+암기)할 필요가 있습니다.

 

◆ useEffect 잘 사용하기

1. useEffect를 꼭 사용해야하는가 고민해보기

useEffect애서는 많은 작업을 할 수 있습니다.

특히 useEffect는 렌더링 이후 실행되는 작업이기 때문에 setState가 동작하고 나서 실행됩니다.

이 말은 이후의 state 값이 담겨져 있다는 것입니다.

초보자 때 가장 많이 하는 실수가 setState 이후의 값을 몰라

어쩔 수 없이 useEffect의 의존성 배열에 넣어 사용하는 것입니다.

예를들어 위에서 보았던 count state가 홀수일 때마다 DB에 데이터를 추가하는 경우

사실 useEffect를 사용할 필요는 없습니다.

아래 코드를 확인해봅시다.

위 처럼 작성하면 useEffect를 사용할 필요가 없습니다.

제가 말씀드리는 것은 이후 state 값을 확인할 수 있는 방법을 알지 못 해

필요없는 useEffect를 작성할 필요가 없다는 의미입니다.

만약 count의 값을 변경할 수 있는 경우가 버튼 클릭 외 많은 방법이 있다면

해당 로직을 함수로 빼서 사용하거나 아니면 useEffect로 해결할 수 있습니다.

 

2. useEffect에서 비동기 처리하는 방법

useEffect에서 사용자 데이터를 axios, fetch를 통해 서버에서 받아오는 경우가 많이 있습니다.

이러한 경우 비동기 코드를 작성해야 하는데 잘 되지 않습니다.

아래와 같이 작성하면 에러가 발생합니다.

(+ 서버 통신 예시로 delayFunction 함수 생성)

이러한 경우 IIFE 즉시실행함수를 사용하여 해결할 수 있습니다.

위와 같이 사용하면 useEffect 내에서 비동기 처리를 할 수 있습니다.

(+ 예시를 2개 보여주기 위해 useEffect를 2개 사용)

 

3. useEffect 역할, 의존성 배열 분리

(+ 소제목 짓기가 어렵네요)

useEffect는 의존성 배열에 있는 값이 변경될 때 재실행 됩니다.

따라서 연관이 있는 작업끼리 묶어주는 것이 좋습니다.

간단하게 예시를 들어보겠습니다.

count1이 홀수인 경우 DB 데이터 추가

count2가 홀수인 경우 DB 데이터 추가

하는 코드를 아래와 같이 작성했다면 어떠한 문제가 있을까요?

위처럼 의도치 않은 버그가 발생할 수 있습니다.

count1을 증가하였는데 count2의 DB도 추가되어 버린 것이죠.

이러한 결과가 생긴 이유는 연관성이 없는 작업 2개가 1개의 useEffect에 있기 때문입니다.

또한 2개가 100% 버그가 생기지 않는 작업이라고 해도 문제가 있습니다.

count1만 수정하여도 count2의 조건을 검사하는 불필요한 작업이 들어가기 때문입니다.

만약 count2로 하는 작업이 많거나 시간이 오래 소요되면 성능 문제가 생길 수 있습니다.

아래와 같이 코드를 수정해보겠습니다.

처음 마운트 될 때를 제외하고 나선

각각의 useEffect는 우리가 원하는대로 동작하고 있습니다.

이렇게 연관성이 없는 작업은 분리해서 해주는 것이 좋습니다.

 

◆ 정리 및 다음 게시글 소개

이번 게시글에서는 useEffect에 대해 알아보았습니다.

개념이 이전 useState, useRef에 비해 많이 어렵습니다.

그래서인지 설명이 충분히 전달 되었는 지도 의문입니다.

2, 3번 읽어도 이해가 가지 않는다면 다른 강의나 자료를 보시고 이해하시길 바랍니다.

다음 게시글에서는 useEffect hook실습을 해보도록 하겠습니다.

 

마지막

해당 내용은 틀릴 수도 있습니다. 틀린 내용이 있으면 조언 부탁드립니다.