액션/계산/데이터를 활용한 useMuation 기능 개선

💡 들어가기

현재 개발 중인 중고나라 기능에서 useMutaion을 내부에서 호출하는 커스텀 훅을 만들게 되면서 중첩 구조가 발생하는 문제가 발생했다.

그래서 지난 화요일에 수강하였던, [원티드] 프리온보딩 챌린지 12월 에서 알게 되었던, Function의 액션/계산/데이터로 리팩토링하기를 적용하고자 해당 기능개선 작업을 진행했다.

---

📍 문제상황

거래 하기 전, 상품 상세에서 채팅하기 or 안전거래 버튼을 눌렀을때, 일일 채팅방 생성 횟수 제한에 걸리게 되면 안내 모달을 띄워야 했다.

상품상세에서 채팅하기/ 안전거래 버튼 존재

그러나, 두 버튼의 비즈니스 로직이 달랐다. 커스텀 훅으로 api 결과값을 확인했던 로직에서 클로저 문제가 발생해 중첩 모달을 제어하지 못하는 문제가 발생되었다.

 

버튼 작동 방식은 아래와 같았다.

1. 채팅하기 
   • 채팅방 생성 api 요청 성공시, 채팅방 생성
   • 채팅방 생성 api 요청 실패시, 일일 채팅방 생성 횟수 제한 모달 띄우기
2. 안전거래
   • 거래 전 채팅 유도 api 요청 성공시, 채팅유도 모달 생성
     • 채팅하고 거래 버튼 클릭시 , 채팅방 생성 api 요청
       • 채팅방 생성 api 요청 성공시, 모달 닫기 후 채팅방 생성
       • 채팅방 생성 api 요청 실패시, 모달 유지 후 일일 채팅방 생성 횟수 제한 content 로 변경

안전거래 버튼 클릭시 나타나는 팝업 모달

 

두 가지 버튼 기능 작동 방식의 순서를 보면 알 수 있듯이 채팅방 생성 api 요청을 호출하는 시점이 다른 것을 알 수 있다.

이것이 바로 문제의 시작점이 된 것이다.

 

사실 해당 커스텀훅이 이전에 개발되었었고, 추후에 기능이 도입된 것이어서 이 부분을 생각하지 못한 것이다.

그래서 모달의 중첩 현상을 마주하게 되었다. 

---

 

🔥 시행착오 / 해결 방법

앞선 문제를 정리하면, 다음과 같다.

채팅방 생성 api는 커스텀 훅 안에서 진행된다. 그러나 안전거래 컴포넌트가 렌더링되는 시점에 이미 custom hook이 호출되었기에 custom hook 내부에서 사용되는 isError의 반환값이 클로저로 작동되어 api 호출 결과값의 isError를 반환받을 수 없었다.

그래서 modal의 중첩을 제어하고, 닫는 동작을 useMutation 자체에 넣어햐 하는 것이다. 
하지만, 이는 불필요한 DOM 동작을 야기했기에 함수 리팩토링 과정이 필요했다. 

1️⃣ useMutation을 생성하는 곳의 onSuccess 에서 modal 제어하기

먼저 클로저로 반환되는 isError를 사용하려면 어떻게 해야 할까..? 고민을 한 결과,

useMuatation내부에서 onSuccess, onError의 결과대로 처리할 수 있는 기능을 활용하기로 했다.

 

return useMutation()
	createChatRoom(),
    onSuccess: () => { // 요청이 성공한 경우,
        console.log('모달닫기');
    },
    onError: (error) => { // 요청에 에러가 발생된 경우
        console.log('onError');
    },
    onSettled: () => { // 요청이 성공하든, 에러가 발생되든 실행하고 싶은 경우
        console.log('onSettled');
    }
);

위의 코드처럼 useMutation 내부에서 UI 제어를 다루는 것이다.

 

문제는 해결되었지만, 모달을 닫는 부분이 해당 api 호출의 성공값으로 들어가있어 모달이 열려있지 않은 상태에서도 해당 함수를 실행하여

불필요한 DOM조작이 발생하는 추가 문제가 나타났다. 

( + 채팅하기 버튼 👉 채팅방 생성 성공시 , 모달 닫기 함수 수행 , ❗️ 상품상세에서는 모달이 띄워져 있지 않음 )

 

그래서 useMutation 내부의 수정이 아닌 커스텀 훅을 리팩토링해야 한다는 것을 알게 되었다.

 

2️⃣ 액션/계산/데이터로 분리하여 모달제어권 넘겨주기

function을 분리하는 작업을 위해 우선 안전거래 버튼 내부의 handleChatProduct (채팅하고 거래하기) 클릭시 수행되는 작업 모식도를 작성했다.

동작 세분화 작업

• 1번과 2번 : 상품상세 내부의 데이터로 수행되는 동작 
  • 상품상세 데이터는 컴포넌트 최상단에서 관리 ( 이 자체는 Data이지만, 이것을 변경한다면 Action) 
• 3번 , 4번, 5번의 채팅방에 정보전달 : 안전거래 버튼 클릭 동작 이후 api의 res로 수행되는 동작 (Action)
  • 카페상품 확인 여부 (Cal)
• 5번, 6번의 보라색 밑줄 : DOM을 조작하는 동작 (Action)

총 3가지의 관련 동작으로 함수가 하는 일을 나열하고 분류했다.

 

이로 인해 알게된것은 다음과 같다.

1. 기존 버튼 채팅하고 거래하기 버튼 클릭 이벤트로 3개의 액션이 수행되는 1개의 액션 함수이면서 1개의 액션이 다음 액션에 영향을 주는 것 👉 데이터를 반환받아 다음함수를 실행하는 구조로 변경 필요
2. 3,4 번에서의 계산 로직 분리가 되어있지 않다는 것

 

결국 최종적으로 DOM 관련 제어를 위해서는 modal의 생성 여부가 매개변수로 들어가야했고, 성공과 실패에 따른 DOM 제어를 위해서는 modal의 생성 여부가 명시적인 인자로 전달되어야 했던 것이다.

 

📌 모달 생성 여부를 명시적 인자로 전달

우선, 문제의 본질이었던 modal이 띄워져있지 않은 상황과 띄워진 상황을 알 수 있는 명시적 인자가 함수에 전달되어야 했다. 

따라서 함수 호출시, 모달의 존재 여부를 인자로 전달하도록 변경했다.

 채팅방생성호출함수({ isExistModal: true });

 

객체 형식으로 전달하여 어떤 기능을 하는 boolean 값인지 명확하게 작성했다.

 

📌 채팅방 생성 api 호출시 , 액션 함수 분리 및 명시적 인자/반환 사용

const 채팅방생성호출함수 = (modal : {isExistModal : boolean}) => {
	if(상품상세데이터.카페상품) 카페상품채팅방생성mutation()
    else(상품상세데이터.웹상품) 웹상품채팅방생성mutation()
}

위는 기존에 mutation을 호출하는 4번의 동작방식이었다.

하지만, 모달의 존재여부를 파악하는 값을 전달받지 못해 mutation 호출이후 모달 제어가 불가능했다.

 

그래서 다음과 같이 리팩토링했다.

const 채팅방생성호출함수 = (modal : {isExistModal : boolean}) => {
	const {isExistModal } = modal;
    
    // ✅ 명시적인자를 갖는 함수로 변경
    if(상품상세데이터.카페상품) 카페상품채팅방생성mutation(isExistModal)
    else(상품상세데이터.웹상품) 웹상품채팅방생성mutation(isExistModal)
}

 

이렇게 mutation내부에 인자를 전달하여 이를 기반으로 dom관련한 동작을 수행할때 조건 분기 처리를 할 수 있게 되었다. 

 

📌 안전지대로 복사본 사용하기 , 데이터 

const 채팅방생성호출함수 = (modal : {isExistModal : boolean}) => {
	const {isExistModal } = modal;
    
    // ✅ 복사본 생성하여 안전지대로 데이터 사용
    const 상품상세데이터_복사본 = 상품상세데이터.slice();
    const { 카페상품, 웹상품 } = 상품상세데이터_복사본;
    
    // 🤔 계산으로 분리할 수 있으나 인자를 또 넘겨주어야 하기에 고민이 되는 부분...!
    if(카페상품) 카페상품채팅방생성mutation(isExistModal)
    else(웹상품) 웹상품채팅방생성mutation(isExistModal)
}

 

상품상세데이터는 컴포넌트 최상단에 관리되고 있기 때문에, 복사본을 생성하여 데이터를 사용하도록 수정하였다.

 

 

➕ 안전거래 버튼 함수 : 액션을 분리하기 위한 서브 루틴 추출

우선 모달이 띄워지기전 수행되는 안전거래 버튼 onClick 함수(checkTransactionPrepare) 는 아래와 같은 기능을 담고 있었다.

 const 안전거래버튼_클릭시_작동하는 함수 = async () => {
 	
    const { data: 채팅여부조사결과 } = await 채팅여부체크api(상품seq);
    
    if(채팅있어야해){
    	if(모바일){
        	하단팝업오픈();
        	return;
        } else (데스크탑){
        	중앙모달오픈();
            return;
        }
    }

    채팅방생성();
  };

안전거래 버튼 클릭 모식도

 

여기서 문제는 다음과 같다.

• 해당 상품 판매자와 채팅이력 검사 / 검사된 결과로 모달 생성 분기처리 / 채팅방 열기 
  총 3가지의 액션이 1개의 함수 내에서 모두 실행
• 암묵적 return 으로 함수의 반환값을 사용하지 못한 것 

그래서 우선 액션을 분리하기 위해 서브루틴을 추출하도록 했다. 

const 안전거래버튼_클릭시_작동하는 함수 = async () => {
 	
    const { data: 채팅여부조사결과 } = await 채팅여부체크api(상품seq);
    
    // ✅ 서브 루틴 추출 구현한 함수 👉 채팅유도모달타입무엇인지 지정
    const 채팅유도필요해 = 채팅유도모달체크함수(채팅여부조사결과);
    
    if(!채팅유도필요해){
    	채팅방생성();
    }
  };
  
  // ✅ 명시적인 입/출력이 존재하는 함수
  const 채팅유도모달체크함수 = (채팅여부조사결과) => {
  	const { 채팅있어야해 } = 채팅여부조사결과;
    
     if(채팅있어야해){
    	if(모바일){
        	하단모달오픈();
        	return true;
        } else (데스크탑){
        	중앙모달오픈();
            return true;
        }
    }
    return false;
  }

 

---

 

🌟 결과

 

우선, 채팅하기 버튼 클릭시에는 채팅방생성 호출 함수를 부를때,

isExistModal : false로 전달한다.

 

반대로, 안전거래 버튼을 클릭하면, checkTransactionPrepare 함수가 실행되면서 왼쪽의 모달을 띄워준다.

 

이후 내부의 채팅하고 거래할래요 버튼을 클릭하면 채팅방 생성 호출 함수를 부를때, isExistModal : true로 전달할 수 있게 되었다.

 

---

🌈 느낀점

사실 모달이 띄워졌는지 여부를 전역 상태로 관리한다면, 해당 명시적 인자의 필요성을 느끼지 못할 수도 있다.

전역상태는 언제 어디에서나 호출하기 쉬우니까 개발자 입장에서는 편리할 수도 있을 것이다.

 

하지만, 시간이 지나 그 전역상태를 지워야 한다면....? 분리해내는 것은 꽤나 까다로울수 있을 것 같다. 는 생각이 든다.

 

어떤 방식이 맞다 틀리다는 아니지만,

차라리 쪼개진 것을 합치는게 추후에 기능을 덧붙이는 과정에 더 유리할 것이라고 생각되는 리팩터링 작업이었다.