리액트로 주소검색 창 만들기 (카카오API 이용)

[ 패키지 구조 ]

my-app/
├── src/
│   ├── components/
│   │   ├── SearchAddressModal.js      // 주소 검색 모달 컴포넌트
│   ├── pages/
│   │   ├── SignUpPage.js               // 회원가입 페이지
│   ├── App.js                           // 메인 앱 컴포넌트
│   └── index.js                         // 진입점
└── package.json

 

[ 패키지 설치 ]

npm install react-daum-postcode

 

 

1. SearchAddressModal.js

import React from 'react';
import {
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalCloseButton,
    ModalBody,
} from "@chakra-ui/react";
import DaumPostcode from "react-daum-postcode";

export default function SearchAddressModal({ isOpen, onClose, onCompletePost }) {
    return (
        <Modal isOpen={isOpen} onClose={onClose} size={"sm"}>
            <ModalOverlay />
            <ModalContent>
                <ModalHeader>주소검색</ModalHeader>
                <ModalCloseButton />
                <ModalBody>
                    <DaumPostcode onComplete={onCompletePost} />
                </ModalBody>
            </ModalContent>
        </Modal>
    );
}

 

2. SignUpPage.js

import React, { useState } from 'react';
import { Button, useDisclosure } from "@chakra-ui/react";
import SearchAddressModal from "../components/SearchAddressModal";

const SignUpPage = () => {
    const {
        isOpen: isSearchAddressOpen,
        onOpen: onSearchAddressOpen,
        onClose: onSearchAddressClose,
    } = useDisclosure();
    
    const [inputAddressValue, setInputAddressValue] = useState('');
    const [showDetailAddressInput, setShowDetailAddressInput] = useState(false);

    const onCompletePost = (data) => {
        setInputAddressValue(data.address);
        onSearchAddressClose(); // 모달 닫기
        setShowDetailAddressInput(true); // 상세주소 입력 필드 보이기
    };

    return (
        <div>
            <Button
                ml={"10px"}
                fontSize={"sm"}
                color={"#F8bbd0"}
                onClick={onSearchAddressOpen}
            >
                주소찾기
            </Button>

            {isSearchAddressOpen && (
                <SearchAddressModal
                    isOpen={isSearchAddressOpen}
                    onClose={onSearchAddressClose}
                    onCompletePost={onCompletePost}
                />
            )}

            {showDetailAddressInput && (
                <input type="text" placeholder="상세주소 입력" />
            )}
        </div>
    );
};

export default SignUpPage;

 

3. App.js

import React from 'react';
import SignUpPage from './pages/SignUpPage';

const App = () => {
    return (
        <div>
            <SignUpPage />
        </div>
    );
};

export default App;

 

4. index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ChakraProvider } from "@chakra-ui/react";
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <ChakraProvider>
        <App />
    </ChakraProvider>
);