[React] 팝업 창 만들기 - daum - post - code (회원가입 - 주소 팝업)

안녕하세요 인포돈 입니다.

최근에 변화된 React v6에 의거하여 작성되었습니다. (인텔리제이 활용)

---

 react프로젝트를 진행하면서, 회원가입 창을 만들어야 했습니다. 그러던 중 주소의 입력을 넣기 위해서 react에서 재공 하는 daum-post-code에 대해서 간략히 파악해 보고 이를 활용해 파업창을 이해해보자

---

Daum-postcode란?

 다음과 kakao에서 제공하는 우편번호 검색 api로 우리가 쉽게 주변에서 우편번호를 입력할 때 가장 많이 보는 형식이다. 나는 이제 해당 api를 활용하여 회원가입의 주소 입력 칸을 해결할 것이다.

---

팝업창 이란?

 팝업창은 특정 웹사이트가 어떠한 내용을 표시하기 위해서 갑자기 생성되는 창을 의미한다. 여기서 우리는 해당 api를 하나의 컴포넌트로 만들어서 특정 버튼을 누르면 해당 컴포넌트가 보이게 제작할 것이다.

 

이때 처음 팝업창을 만들 때 헷갈렸던 것이 있다. 팝업창이란 게 새로운 창을 띄우는 게 될 수도 있지만, 현재 있는 html 형식 위에 덮어 씌우기 형식으로 띄울 수도 있다는 것이다.

---

설치방법

 리액트 프로젝트 위치에서 terminal을 실행시키고 아래 코드를 입력한다.

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

그럼 이제 준비끄 끝!!!!

---

사용방법

 우리는 이제 만들어야 하는 게 3가지 있다.

1) api를 실행할 컴포넌트

2) 주소를 넣어줄 text와 팝업을 띄울 button

3) 필요한 event handler

 

1) api를 실행할 컴포넌트 준비

import React, { useEffect, useState } from "react";
import DaumPostcode from "react-daum-postcode";
import './post.css';

const Post = (props) => {

    const complete = (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(data)
        console.log(fullAddress)
        console.log(data.zonecode)

        props.setcompany({
            ...props.company,
            address:fullAddress,
        })
    }

    return (
        <div >
            <DaumPostcode
                className="postmodal"
                autoClose
                onComplete={complete} />
        </div>
    );
};

export default Post;

자 여기서 굳이 if문을 사용하지 않고  반환 값을 중 원하는 값만 사용하면 됩니다. 굳이 이런 식으로 if문을 사용하지 않고 그냥 data.address를 사용해도 무방하지요

반환 값을 확인하고 싶으면 공식문서를 확인하세요

Daum 우편번호 서비스

또한, 여기서 저는 해당 컴포넌트를 실행할 때 hook을 인자로 넘겨줄 것이기 때문에 company와 setCompany를 활용할 수 있는 것입니다. 이는 2)을 같이 보면서 이해하면 쉽습니다.

 

 

여기서 반듯이 css를 작성해 주셔야 돼요. 저 같은 경우 새로운 창을 띄우기보다는 현재 컴포넌트에서 최상위로 올려놓는 팝업 형식이거든요.

.postmodal{
    background : rgba(0,0,0,0.25);
    position : fixed;
    left:0;
    top:0;
    height:100%;
    width:100%;
}

이런 식으로 css를 작성해 주지 않으면 그냥 페이지에 post api가 뜨게 됩니다.

 

  2) text, button 만들기 3) event 처리

const [enroll_company, setEnroll_company] = useState({
	address:'',
});

const [popup, setPopup] = useState(false);

const handleInput = (e) => {
	setEnroll_company({
    	...enroll_company,
        [e.target.name]:e.target.value,
    })
}

const handleComplete = (data) => {
    setPopup(!popup);
}
    
retrun(
<div className="address_search" >address
    <input className="user_enroll_text" placeholder="주소"  type="text" required={true} name="address" onChange={handleInput} value={enroll_company.address}/>
    <button onClick={handleComplete}>우편번호 찾기</button>
    {popup && <Post company={enroll_company} setcompany={setEnroll_company}></Post>}
</div>
)

뭐 꼭 이런 형식이 아니어도 됩니다. 여기서 핵심은 버튼을 누르면 handleComplete함수가 실행되어서 popup이 true가 된다는 점! 그때 아래 코드의 popup은 창이 띄어지게 됩니다. 인자로는 company와 setcompnay로 hook을 넘겨줍니다.

 

여기서 <Post>에는 autoClose의 속성이 있기 때문에 주소를 검색하고 클릭하면 자연스럽게 팝업창이 사라집니다.