React-Native 프로젝트 중 @actbase/react-daum-postcode 라이브러리를 사용하여 주소 찾기를 구현한 것을 정리한다.

Stack 에 Screen 정의

주소 입력 스크린 => PostCode Screen => 주소 입력 스크린 방식으로 작업하여

navigation

export type MyPageStackParamList = {
  MyPageRoot: undefined
  MyPageCollecting: undefined
  MyPageDeposit: undefined
  MyPageChangeInfo: undefined | { address: string; userInfo?: UserInfo }
  MyPageSearchAddress: undefined
}

MyPage.tsx

// .. 다른 코드들...
	<MyPageStack.Screen
       options={{ headerTitle: '주소 검색' }}
       name="MyPageSearchAddress"
       component={PostCode}
      />
// .. 다른 코드들...

PostCode 컴포넌트 작성

PostCode.tsx

import React from 'react'
import Postcode from '@actbase/react-daum-postcode'
import { OnCompleteParams } from '@actbase/react-daum-postcode/lib/types'
import { MyPageScreenProps } from '../../types/navigation'

type PostCodeScreenProps = MyPageScreenProps<'MyPageSearchAddress'>

const PostCode = ({ navigation }: PostCodeScreenProps) => {
  // Functions
  const onAddressSelected = (addressData: OnCompleteParams) => {
    console.log('주소 데이터', addressData)
    const address = addressData.address
    navigation.navigate('MyPageChangeInfo', { address })
  }
  const onAddressError = (error: unknown) => {
    console.log('주소에러', error)
    navigation.goBack()
  }
  return (
    <Postcode
      style={{ width: '100%', height: '100%' }}
      onSelected={onAddressSelected}
      onError={onAddressError}
      jsOptions={{ animation: true }}
    />
  )
}

export default PostCode

PostCode 컴포넌트의 onSelected 에 주소 선택 후 이전 Screen인 MyPageChangeInfo 로 주소 정보를 파라미터로 보내주었다.