쉽게 배우는 리액트 프로그래밍

리액트 부수효과 useEffect 완벽 마스터하기: 핵심 개념부터 활용법까지

todaypick124 2024. 10. 13. 21:03
반응형

리액트에서 컴포넌트 외부와 상호작용하는 작업을 어떻게 처리해야 할까요? 혹시 컴포넌트가 렌더링될 때마다 데이터를 가져오거나, DOM을 조작해야 하는 상황에 봉착했나요?  걱정 마세요! 리액트는 이런 외부 상호작용을 위한 멋진 기능, 바로 부수 효과(Side Effects)와 이를 관리하는 useEffect 훅을 제공한답니다.

 

오늘은 리액트 애플리케이션에서 부수 효과를 효과적으로 실행하는 방법, 그리고 useEffect 훅의 다양한 활용법을 알아보는 시간을 가져볼게요.

 

리액트에서 컴포넌트를 만들 때, 우리는 주로 props와 state를 이용해서 UI를 그려내고 관리하죠. 하지만, 컴포넌트 내부에서만 동작하는 로직만으로는 모든 것을 해결할 수 없어요.  때로는 외부 API와 통신해서 데이터를 가져오거나, 타이머를 설정하거나, 이벤트 리스너를 추가하는 등 컴포넌트 외부와의 상호작용이 필요할 때가 있답니다. 이러한 컴포넌트 외부의 작업들을 바로 부수 효과(Side Effects)라고 부른답니다.

 


useEffect 훅: 리액트의 부수 효과 관리자


useEffect 훅의 기본 개념

useEffect 훅은 리액트 함수형 컴포넌트에서 부수 효과를 정의하고 실행하는 데 사용하는 핵심 도구에요.

 

쉽게 말해, 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 지시하는 역할을 한답니다.  마치 컴포넌트가 렌더링이라는 무대에 오르면, 뒷 무대에서 조명, 음향, 특수효과 등을 담당하는 스태프와 같은 존재라고 생각하면 쉬워요. 이 스태프가 바로 useEffect 훅인 거죠! 😄

 

useEffect는 두 가지 중요한 역할을 수행해요. 첫째, 컴포넌트가 렌더링될 때 실행되는 함수를 정의합니다. 둘째, 이 함수가 실행되는 조건을 명확하게 설정하는 의존성 배열을 활용해요.  의존성 배열을 통해 컴포넌트의 특정 상태 또는 props가 변경될 때만 부수 효과가 실행되도록 제어할 수 있답니다. 이를 통해 불필요한 작업을 줄이고 애플리케이션의 성능을 향상시킬 수 있다는 점! 잊지 마세요!

 


useEffect 훅의 구조

useEffect 훅은 다음과 같은 구조를 가지고 있어요.

 

예를 들어, 특정 state 값이 변경될 때마다 데이터를 가져오고 싶다면, 의존성 배열에 해당 state를 넣으면 된답니다.

 


useEffect 훅 사용 예시

이제 간단한 예제를 통해 useEffect 훅을 어떻게 사용하는지 살펴볼게요.

 

위 예제에서는 버튼을 클릭할 때마다  state가 증가하고,  state가 변경될 때마다 문서 제목이 업데이트되도록 설정했어요.  훅의 두 번째 인자에 를 넣어서  state가 변경될 때만 문서 제목이 업데이트되도록 제어하는 거랍니다.

 


부수 효과 정리하기: Cleanup Function

부수 효과를 실행하는 것만큼이나 중요한 것이 바로 정리(Cleanup) 작업이에요.

 

부수 효과를 실행하는 과정에서 외부 리소스를 사용하는 경우가 많아요. 예를 들어, 이벤트 리스너를 추가하거나, setInterval을 사용해서 타이머를 설정하는 경우가 있죠. 이러한 외부 리소스를 사용한 후에는 반드시 정리 작업을 해주어야 메모리 누수를 방지할 수 있답니다.

 

useEffect 훅은 이러한 정리 작업을 위한 cleanup function을 제공해요.

 

cleanup function은 useEffect 함수 내부에서 반환하는 함수에요. 이 함수는 컴포넌트가 언마운트되기 전이나, 의존성 배열에 있는 값이 변경되기 전에 실행된답니다.

 


Cleanup Function 예시

아래 예제를 통해 cleanup function이 어떻게 사용되는지 알아볼게요.

 

위 예제에서는 1초마다 를 실행하는 타이머를 설정했어요. 그리고  훅에서 반환하는 함수를 통해 타이머를 해제하는 작업을 수행하고 있답니다. 컴포넌트가 언마운트될 때, 즉 컴포넌트가 화면에서 사라지기 전에  함수를 실행해서 타이머를 정리해주는 거예요.

 


useEffect 훅 활용 팁

useEffect 훅은 다양한 상황에서 유용하게 활용될 수 있어요. 몇 가지 팁을 알려드릴게요.

 


1. 데이터 Fetching

데이터를 가져오는 작업은 리액트 애플리케이션에서 흔히 볼 수 있는 부수 효과 중 하나랍니다.

 

useEffect 훅을 사용하면 컴포넌트가 마운트될 때 외부 API로부터 데이터를 가져오고, 렌더링하는 작업을 깔끔하게 처리할 수 있어요.

 


데이터 Fetching 예시

위 예제에서는 컴포넌트가 마운트될 때  함수를 사용하여 외부 API로부터 데이터를 가져오는 작업을 수행해요. 데이터를 가져오는 동안  state를 로 설정하고, 데이터를 가져온 후에는  state에 데이터를 저장하고  state를 로 변경한답니다. 만약 에러가 발생하면  state에 에러 메시지를 저장해요.

 


2. DOM 조작

useEffect 훅을 사용해서 DOM을 직접 조작할 수도 있어요.

 

하지만, DOM을 직접 조작하는 것은 리액트의 장점인 가상 DOM을 활용하지 못하고, 컴포넌트 재렌더링 시 문제를 야기할 수 있으므로 신중하게 사용해야 한답니다.

 


DOM 조작 예시

위 예제에서는 라는 ID를 가진 DOM 요소를 찾아서 색상을 빨간색으로 변경해요. 컴포넌트가 언마운트될 때, 에서 색상을 다시 검은색으로 변경한답니다.

 


3. 이벤트 리스너 추가 및 제거

컴포넌트가 마운트될 때 이벤트 리스너를 추가하고, 언마운트될 때 이벤트 리스너를 제거하는 것은 useEffect 훅을 사용하면 매우 쉽게 구현할 수 있어요.

 


이벤트 리스너 예시

위 예제에서는 창 크기가 변경될 때마다 를 실행하는 이벤트 리스너를 추가했어요. 그리고  훅에서 반환하는 함수를 통해 이벤트 리스너를 제거하는 작업을 수행한답니다. 컴포넌트가 언마운트될 때,  함수를 실행하여 이벤트 리스너를 제거해주는 거예요.

 


4. 타이머 설정 및 해제

setInterval이나 setTimeout과 같은 타이머 함수를 사용하는 경우에도 useEffect 훅을 사용하면 타이머를 쉽게 관리할 수 있어요.

 


타이머 예시

위 예제에서는 5초 후에 를 실행하는 타이머를 설정했어요. 그리고  훅에서 반환하는 함수를 통해 타이머를 해제하는 작업을 수행하고 있답니다. 컴포넌트가 언마운트될 때,  함수를 실행하여 타이머를 정리해주는 거죠.

 


의존성 배열과 부수 효과 제어

useEffect 훅의 두 번째 인자인 의존성 배열은 부수 효과를 제어하는 데 매우 중요한 역할을 한답니다.

 

의존성 배열에 어떤 값을 넣느냐에 따라 부수 효과가 실행되는 시점이 달라져요.

 


의존성 배열실행 시점

[] (빈 배열) 컴포넌트가 처음 마운트될 때 한 번만 실행
[count] count state가 변경될 때마다 실행
[props.name] props.name prop이 변경될 때마다 실행
[count, props.name] count state 또는 props.name prop이 변경될 때마다 실행

 


의존성 배열 사용 팁


부수 효과의 중요성

부수 효과는 컴포넌트 외부와 상호작용하는 작업을 처리하는 데 필수적이지만, 잘못 관리하면 애플리케이션의 성능 문제나 메모리 누수를 야기할 수 있답니다.

 

따라서 useEffect 훅을 올바르게 사용하여 부수 효과를 효율적으로 관리하는 것이 리액트 애플리케이션 개발에서 매우 중요하다는 점을 꼭 기억해주세요!

 


결론

useEffect 훅은 리액트에서 부수 효과를 관리하는 필수적인 도구에요.

 

useEffect를 통해 데이터를 가져오거나, DOM을 조작하거나, 이벤트를 처리하거나, 타이머를 설정하는 등 컴포넌트 외부와의 상호작용을 효율적으로 관리할 수 있답니다.

 

특히, 의존성 배열을 활용하면 부수 효과가 실행되는 시점을 정확하게 제어하고, 불필요한 작업을 줄여 애플리케이션의 성능을 향상시킬 수 있어요.

 


QnA

Q1. useEffect 훅은 언제 사용해야 하나요?

 

A1. 컴포넌트 외부와 상호작용하는 작업을 수행해야 할 때, 즉 데이터를 가져오거나, DOM을 조작하거나, 이벤트 리스너를 추가하거나, 타이머를 설정해야 할 때 사용하면 좋아요.

 

Q2. 의존성 배열은 왜 중요한가요?

 

A2. 의존성 배열을 통해 부수 효과가 실행되는 시점을 제어할 수 있고, 불필요한 작업을 줄여 애플리케이션 성능을 향상시킬 수 있답니다.

 

Q3. Cleanup function은 어떤 경우에 사용하나요?

 

A3. 부수 효과를 실행하는 과정에서 외부 리소스를 사용하는 경우, 예를 들어 이벤트 리스너를 추가하거나 타이머를 설정하는 경우, 해당 리소스를 해제하기 위해 Cleanup function을 사용해야 메모리 누수를 방지할 수 있어요.

 

추가 자료

자료설명

React 공식 문서 React 공식 문서에서 useEffect 훅에 대한 자세한 내용을 확인할 수 있어요.
React Hooks Cheatsheet React Hooks를 사용하는 방법을 한눈에 보여주는 cheatsheet이에요.

 

리액트,React,부수효과,SideEffects,useEffect,훅,Hooks,컴포넌트,Component,렌더링,Rendering,데이터,Data,Fetching,DOM,조작,이벤트,Event,Listener,타이머,Timer,성능,Performance,개발,Development,웹개발,WebDevelopment,프로그래밍,Programming,자바스크립트,JavaScript,리액트개발,ReactDevelopment,리액트튜토리얼,ReactTutorial,리액트팁,ReactTips,웹앱,WebApp,프론트엔드,Frontend,개발자,Developer

 

 

 

관련 포스트 더 보기

[쉽게 배우는 리액트 프로그래밍] - 리액트 프로그래밍: 데이터 흐름 & 통신 완벽 가이드

 

리액트 프로그래밍: 데이터 흐름 & 통신 완벽 가이드

데이터베이스 성능을 좌우하는 요소 중 하나는 바로 효율적인 데이터 저장 및 접근 방식이에요. 데이터베이스 시스템에서 널리 사용되는 B-트리는 이러한 목적을 달성하기 위한 핵심적인 자료

todaypick124.tistory.com

[쉽게 배우는 리액트 프로그래밍] - 리액트 프로그래밍: 컴포넌트로 UI 마스터하기

 

리액트 프로그래밍: 컴포넌트로 UI 마스터하기

리액트 프로그래밍에서 UI를 멋지게 구축하는 핵심은 바로 요소(Element)와 컴포넌트(Component)를 어떻게 활용하느냐에 달려 있어요. 솔직히 말해서, 리액트를 처음 접했을 때 이 개념들이 좀 헷갈렸

todaypick124.tistory.com

[쉽게 배우는 리액트 프로그래밍] - 리액트 웹앱 속도, SEO 잡는 서버 사이드 렌더링

 

리액트 웹앱 속도, SEO 잡는 서버 사이드 렌더링

웹 애플리케이션 개발에서 성능과 검색 엔진 최적화(SEO)는 정말 중요하죠. 특히 요즘처럼 사용자들이 빠른 로딩 속도를 기대하는 시대에는 더더욱 그렇고요. 리액트를 사용해서 웹앱을 만들 때,

todaypick124.tistory.com

[쉽게 배우는 리액트 프로그래밍] - 리액트 프로그래밍 시작 전 필수! 선행 조건 완벽 정리

 

리액트 프로그래밍 시작 전 필수! 선행 조건 완벽 정리

리액트(React)는 요즘 웹 개발에서 빼놓을 수 없는 인기 UI 라이브러리죠. 페이스북에서 개발해서 꾸준히 업데이트되고, 덕분에 엄청나게 많은 개발자들이 리액트를 사용하고 있어요. 근데 리액트

todaypick124.tistory.com

[쉽게 배우는 리액트 프로그래밍] - 리액트 프로그래밍, key prop 제대로 알고 쓰시나요? 핵심 정리!

 

리액트 프로그래밍, key prop 제대로 알고 쓰시나요? 핵심 정리!

확인했습니다.리액트를 좀 써봤다 하는 분들이라면, 리스트 렌더링할 때 key prop을 꼭 넣어줘야 한다는 걸 알고 있을 거예요. 콘솔에서 "Each child in a list should have a unique 'key' prop" 경고 메시지가 뜨

todaypick124.tistory.com

 

반응형