[React] React useEffect hook 에 대해 알아보자

이번 포스팅에선 React에서 자주 쓰이는 hook인 useEffect에 대해 알아보도록 하자.

useEffect hook

useEffect 개념

useEffect는 React 컴포넌트에서 side effects(부수 효과)를 처리하기 위해 사용되는 hook이다. Side effects는 컴포넌트의 렌더링과는 관련이 없는 작업들을 의미한다.

useEffect 사용시점

내가 이해한 useEffect의 사용 시점은 크게 두 가지이다. 첫 번째는 맨 처음 컴포넌트가 렌더링 될 때 보여줘야 할 데이터를 가져오는 작업 시, 두 번재는 특정 데이터가 바뀌었을 때 어떤 로직을 수행할 때 이다. 그럼 여기서 의문이 생길 수 있다. 어? 그냥 컴포넌트 안에 로직을 써두면 되는 것 아닌가? 컴포넌트는 다양한 방법으로 새로 렌더링 되는 경우가 많은데, 이 때 컴포넌트 안에 있는 로직도 같이 수행이 되기 때문에 원치 않은 코드 실행이 일어날 수 있다. 그럼 useEffect의 사용 예시를 코드와 함께 더 자세히 알아보도록 하자.

의존성 배열 사용 X

위에서 볼 수 있듯 useEffect hook은 인자 두 개를 받는데, 첫 번째 인자는 콜백 함수가 들어가 실행할 로직이 쓰이고, 두 번재 인자에는 의존성 배열이라는 것이 들어간다. 14번째 줄을 보면 의존성 배열이라고 불리는 것이 비어있는 것을 볼 수 있는데, 이렇게 작성을 하면 첫 번째 인자인 콜백 함수는 컴포넌트가 맨 처음 렌더링 될 때만 실행된다. 위의 코드를 보면 한 가지 더 눈여겨 볼 만한 점이 있는데, 11번째 ~ 13번째 줄을 보면 이상한 문법이 적혀있다. 컴포넌트가 언마운트될 때 실행되는 코드라고 적혀있는데, 컴포넌트가 언마운트되는 것은 해당 컴포넌트가 화면에서 사라지고 더 이상 렌더링되지 않는 상태를 의미한다. 예를 들어, 사용자가 다른 페이지로 이동하거나 모달 창이 닫힐 때 컴포넌트는 언마운트될 수 있다. 따라서 해당 컴포넌트가 사라질 때 어떤 로직을 추가하고 싶다면, 위 코드 기준 12번째 줄에 추가하면 된다. 이제 다음 코드를 보자.

의존성 배열 사용 O

위 코드 21번째 줄을 보면 의존성 배열에 어떤 값이 추가된 것을 볼 수 있다. 의존성 배열에는 다양한 값들이 들어갈 수 있는데, 변수 또는 상수 뿐 아니라 함수, 객체도 들어갈 수 있다. 위 코드에선 의존성 배열에 count가 들어가 있는 것을 볼 수 있는데, 그 의미는 useEffect의 첫 번째 인자인 콜백함수는 두 번째 인자인 의존성 배열 안의 count값이 바뀔 때만 실행된다는 것을 의미한다. 의존성 배열은 말 그대로 배열이기 때문에 여러 값들이 들어갈 수 있다.

useEffect 정리

정리하자면 useEffect hook은 컴포넌트가 리렌더링 되는 것에 영향을 받지 않는 코드를 작성해야 하거나, 특정 데이터가 바뀔 때만 어떤 로직을 실행해야 할 때 사용하면 유용하다.