결제위젯으로 React의 useEffect 사용해보기

2024년 10월 31일 ・ 읽는 시간 6분

지난 아티클에서는 React에서 가장 자주 사용하는 useState Hook에 대해 알아봤습니다. 오늘은 예시를 통해 useEffect Hook을 자세히 살펴볼게요.

useEffect는 React의 함수형 컴포넌트에서 컴포넌트의 라이프사이클을 관리할 수 있도록 도와주는 Hook입니다. 이전에는 클래스 컴포넌트에서 componentDidMount, componentDidUpdate, componentWillUnmount 등의 라이프사이클 메서드를 사용했다면, 이제는 useEffect 하나로 다양한 작업을 처리할 수 있어요. 이번 아티클에서는 useEffect의 기본 개념부터 간단한 예제까지 함께 살펴보겠습니다.

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 하는 Hook입니다. 상태 업데이트, 데이터 로드, 구독/해제 등 다양한 작업을 useEffect를 통해 실행할 수 있어요.

위 코드에서 다음 두 가지 중요한 요소가 있어요.

• 첫 번째 매개변수로는 실행할 함수를 넘깁니다.
• 두 번째 매개변수로는 의존성 배열을 넘깁니다. 이 배열에 들어간 값이 바뀔 때마다 useEffect의 함수가 실행돼요.

의존성 배열에는 다음과 같은 값을 넣을 수 있어요.

• 빈 배열 ([]): 컴포넌트가 처음 렌더링될 때만 한 번 실행됩니다.
• 상태나 props 배열: 배열에 넣은 값이 변경될 때마다 useEffect가 실행됩니다.
• 의존성 배열 생략: useEffect가 모든 렌더링 이후 실행되며, 무한 루프에 주의해야 합니다.

결제위젯은 토스페이먼츠만의 결제 UI입니다. 아래와 같이 다양한 결제수단을 커스텀 UI로 연동할 수 있다는 장점이 있어요. 연동이 완료되면 결제위젯 어드민에서 결제수단, 테마 등 다양한 디자인 및 기능을 자유롭게 노코드로 수정할 수 있어요.

결제위젯을 사용하려면 클라이언트 키로 토스페이먼츠 SDK를 초기화한 다음에 결제위젯 객체를 생성해야 됩니다. 여러 결제수단을 사용하는 상점에서는 여러 클라이언트 키를 사용할 수도 있고요.

따라서 아래 코드에서는 clientKey, customerKey가 변경될 때마다 새로운 결제위젯 객체를 생성하는 로직을 useEffect로 구현했습니다. clientKey와 customerKey가 변경될 때마다 useEffect가 실행되며, 새로운 결제위젯 객체가 생성돼요.

앞서 결제위젯을 동적으로 초기화하는 방법을 살펴봤는데요. 한 페이지에 두 개의 결제 UI를 렌더링할 수 없기 때문에 새로운 위젯 객체가 초기화되면 기존 결제 UI를 제거하고 새로운 결제 UI를 렌더링해야 합니다.

useEffect는 컴포넌트가 사라지기 전, 또는 의존성이 변경될 때 클린업 작업을 할 수 있어요. 아래 코드는 처음 컴포넌트가 렌더링될 때 결제 UI를 렌더링하고, 반환된 클린업 함수는 컴포넌트가 재렌더링될 때 기존의 결제 UI를 정리합니다.

마지막 예시에서는 useEffect로 API를 호출해볼게요. 결제 성공 페이지에서 결제 승인 API로 결제 데이터를 불러옵니다. 결제 승인을 호출하는 페이지로 진입했을 때 API를 한 번만 호출해야 하기 때문에 의존성 배열에 빈 배열을 넣었어요.

위 예시들이 프로젝트에서 실제로 작동하는 방법을 보고 싶다면 토스페이먼츠 결제 샘플 프로젝트를을 실행해보세요.

useEffect는 컴포넌트의 라이프사이클을 관리하는 데 큰 도움을 주지만, 최소한의 의존성 배열을 사용해야 불필요한 렌더링과 성능 저하를 방지할 수 있습니다. useEffect는 API로 데이터를 불러오거나, 사용자의 입력에 따라 실시간으로 변화를 감지하는 기능 등 다양한 곳에 활용할 수 있어요. 위 예제들을 통해 useEffect의 기본 사용법을 익히고, 실제 프로젝트에서도 직접 활용해보세요!