[React.js] react-daum-postcode 라이브러리 테마 커스텀하기

joy_five·2022년 11월 19일

Daum post code react-daum-postcode react.js 다음 우편번호 서비스 우편번호 서비스 테마

Daum Post Code 라이브러리 도입

우편번호 서비스를 통해 사용자가 선택한 주소를 String으로 반환받고, 해당 주소가 서울인 경우에만 랜딩 페이지로 넘겨 사용자가 찾은 '구' 정보로 커뮤니티 페이지나 정보 페이지로 넘겨줄 수 있도록 플로우를 수정했습니다.

기존 플로우에서는 구를 선택해야 넘어가는 구조로, 사용자가 원하는 위치가 무슨 구에 속해있는지를 사용자가 알아보고 서비스 내의 '구' 버튼을 눌러야하므로 발생할 수 있던 이탈률을 방지할 수 있는 플로우가 추가된 셈입니다 😤

react-daum-postcode

카카오에서 제공하는 Daum 우편번호 서비스 를 활용하기로 결정하고, 팀원분이 리액트에 최적화된 방식으로 사용할 수 있는 react-daum-postcode 라이브러리를 찾아 프로젝트에 적용해주셨습니다.

npm install react-daum-postcode
# or
yarn add react-daum-postcode

# if react not installed, install react also.
npm install react
# or
yarn add react

react-daum-postcode Embed

import React from 'react';
import DaumPostcodeEmbed from 'react-daum-postcode';
const Postcode = () => {
  const handleComplete = (data) => {
    let fullAddress = data.address;
    let extraAddress = '';
    if (data.addressType === 'R') {
      if (data.bname !== '') {
        extraAddress += data.bname;
      }
      if (data.buildingName !== '') {
        extraAddress += extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName;
      }
      fullAddress += extraAddress !== '' ? ` (${extraAddress})` : '';
    }
    console.log(fullAddress); // e.g. '서울 성동구 왕십리로2길 20 (성수동1가)'
  };
  return <DaumPostcodeEmbed onComplete={handleComplete} {...props} />;
};

DaumPostcodeEmbed from 'react-daum-postcode'; 컴포넌트를 활용하여 우편번호 검색 서비스를 임베드 방식으로 간편하게 이용할 수 있는 ✨골-져스✨한 라이브러리 덕분에 손쉽게 프로젝트에 적용할 수 있었습니다.

테마 커스텀

테마 수정하기 도전!

그 다음 고민은 공식 다음 우편번호 서비스에서는 테마를 제공하는데, 클래스형 생성자를 활용한 코드 가이드가 첨부되어있어 우리는 new daum.Postcode를 할 수 있는 daum.Postcode가 없는데...? 하는 고민을 하다가 프론트끼리(라고 해도 효진님과 나 2명이지만) 머리를 맞대고 일단 집어넣기 도전💧

카카오의 공식 가이드

카카오에서 제공하는 테마 수정 가이드

//아래 코드처럼 테마 객체를 생성합니다.(color값은 #F00, #FF0000 형식으로 입력하세요.)
//변경되지 않는 색상의 경우 주석 또는 제거하시거나 값을 공백으로 하시면 됩니다.
var themeObj = {
   bgColor: "", //바탕 배경색
   searchBgColor: "", //검색창 배경색
   contentBgColor: "", //본문 배경색(검색결과,결과없음,첫화면,검색서제스트)
   pageBgColor: "", //페이지 배경색
   textColor: "", //기본 글자색
   queryTextColor: "", //검색창 글자색
   postcodeTextColor: "", //우편번호 글자색
   emphTextColor: "", //강조 글자색
   outlineColor: "" //테두리
};
//위에서 생성한 themeObj객체를 우편번호 서비스 생성자에 넣습니다.
//생성자의 자세한 설정은 예제 및 속성탭을 확인해 주세요.
new daum.Postcode({
   theme: themeObj
}).open();
new daum.Postcode({
   theme: themeObj
}).embed(target);

써드파티 라이브러리에서는 어떻게 적용할까

😱 : themeObj를 생성하는것까진 알겠는데 new를 할 daum.Postcode가 없다니까??? 게다가 open이랑 embed(target)은 또 뭐야?? 우린 target이 없는데!?

어떻게 데이터를 전달할지, 커스텀이 안되는 것이 아닌지 고민을 하다가 일단 라이브러리 레파지토리에 냅다 질문 이슈를 남겨봤습니다.

친절한 개발자 선생님의 칼답을 받고 가능하다니까! 어떻게! 로 다시 돌아와서 생각해보니 우리는 클래스는 없지만, 임베드한 컴포넌트에 프롭스로 데이터를 넘기고 있는게 드디어 눈에 들어왔습니다.

React에서는 데이터를 store와 props로 관리합니다.

  const handleComplete = (data) => {
    let fullAddress = data.address;
    let extraAddress = '';
    if (data.addressType === 'R') {
      if (data.bname !== '') {
        extraAddress += data.bname;
      }
      if (data.buildingName !== '') {
        extraAddress += extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName;
      }
      fullAddress += extraAddress !== '' ? ` (${extraAddress})` : '';
    }
    console.log(fullAddress); // e.g. '서울 성동구 왕십리로2길 20 (성수동1가)'
  };

우리는 handelComplete 함수를 통해 주소를 반환받을 함수를 정의하고, 반환 이후 어떤 동작을 할지 정의를 할 수 있습니다.

  return <DaumPostcodeEmbed onComplete={handleComplete} {...props} />;
};

또한, 위 함수를 onComplete이라는 이름으로 라이브러리에서 임포트했던 DaumPostcodeEmbed 컴포넌트에 넘겨주고 있고, 예제에서는 다른 프롭스를 추가 할 수 있다는 점이 명시되어 있습니다.

카카오에서 제공하는 가이드에서는 수정이 가능한 컬러코드를 정의한 themeObj를 theme이라는 키로 클래스에 추가하는 방식으로 되어있었기 때문에, 우리는 themeObj 객체를 theme키로 프롭스를 보내줄 수 있습니다.

최종 테마설정 결과

실제 프로젝트 적용 코드

    <>
      <DaumPostcode
        theme={themeObj} //사용자정의 테마 객체 넘기기
        style={postCodeStyle} //사용자정의 스타일 넘기기
        onComplete={handleComplete} // react-daum-postcode 제공 함수
      />
    </>