React props에서 정보 받기 (부모-아들)

현재 진행중인 프로젝트는 피그마로 설계를 끝낸 후, 현재 화면구현 단계를 진행중이다.

 

 

본 일정은 23-11-07 까지, 애초에 설계대로 페이지 7페이지 정도씩, 10일이라는 기간을 두고 진행했는데 진행하던 도중 생각지 못하게 필요한 팝업페이지나 모달 창 들이 생겨서 23-11-10 까지 기간을 늘렸다. 3일정도 더 늘린 결과, DB를 설계해야 하는 기간과 맞물렸지만, 일단 총 기한은 틀어지지 않게 할 예정이다.

 

2명이서 하는 프로젝트이다 보니, 의견 조율은 쉽지만 작업도가 크게 진전되질 않는다. 생각보다 개인이 맡아야할 페이지가 많았던 탓에.

 

 

오전 오후 가리지 않고 매번 접속해있는 Figma 상태창에 팀원을 보며 나도 진행해보지만 생각보다 일이 크다. React에 대해서 잘 알지못하는 탓도 있지만, 애초에 그것 때문에 이 프로젝트를 진행하는 것이기 때문에 어쩔 수 없다.

 

db에서 값을 불러들어올 컴포넌트들은 더미데이터를 직접 입력해넣어 사용중이지만, 컴포넌트 간에 정보를 주고 받는 경우는 화면을 구현하며 같이 구현하려고 한다. 

 

그 중에, 배송지를 관리해야 하는 기능이 있는데 Modal을 사용하면 부모 페이지가 작동이 불가하기때문에, 독립적으로 진행해도 되는 기능인데 굳이 modal을 사용해야 할까 하는 의문에 Popup을 이용했다. 즉 Popup 에서 보내지는 데이터를 부모 데이터에서 받아와야 한다.

 

 

우편번호찾기 버튼을 누르면, react-daum-postcode 에서 임포트한 DaumPostCode가 열린다. 주소검색을 해서 완료가 됐다면 

 

 

이 처럼 표시되게 해야한다.

 

 

위 기능을 사용하는것도 조금 삽질을 오래했지만, props로 데이터를 받는 기본적인 것도 조금 헤맸다. 이렇기 때문에 개발시간이 좀 늘어나지 않을까... api를 설계할때는 조금 더 빠르게 진행될 것같기도

 

 

        <div>
            <DaumPostcode style={postCodeStyle}
            onComplete={handleComplete}/>
        </div>
        
     const handleComplete = (data) => {
        // 주소 데이터를 처리하는 로직이 여기에 들어갑니다.
        // 예를 들어, 전체 주소를 구성하거나, 추가 주소 정보를 포함할 수 있습니다.

        // 완성된 주소 데이터를 부모 컴포넌트로 전달합니다.
        // 이 함수는 부모 컴포넌트에서 전달 받아야 합니다.
        if (props.onSelect) {
            props.onSelect(data);

            console.log(data.address);
            console.log(data.autoJibunAddress);
        }

 

 

간단하게, 어떻게 사용하는지만 설명하자

 

DaumPostCode를 사용해서, 결과를 불러들이기 위해선 onComplete 속성이 필요하다. 

 

 

검색해서 나온 데이터를 클릭하며 닫혔을때, onComplete가 작동한다. 즉, 위 코드에서 handleComplete 에 (data) 로 정보가 넘어와진다. 그렇다면 console.log(data)를 한다면 모든 정보가 불러와진다. 디버깅을 걸어놓고 콘솔창에 data를 입력해보면 어떤 정보가 넘어와지는지 확인할 수 있다.

 

위 단계까지 왔다면 이 DaumPostCode는 정상적으로 작동한다는 것을 뜻한다. 이제 부모페이지에 해당 정보가 전송되게만 하면 된다. 

 

     const handleComplete = (data) => {
        // 주소 데이터를 처리하는 로직이 여기에 들어갑니다.
        // 예를 들어, 전체 주소를 구성하거나, 추가 주소 정보를 포함할 수 있습니다.

        // 완성된 주소 데이터를 부모 컴포넌트로 전달합니다.
        // 이 함수는 부모 컴포넌트에서 전달 받아야 합니다.
        if (props.onSelect) {
            props.onSelect(data);

            console.log(data.address);
            console.log(data.autoJibunAddress);
        }
}

 

해당 코드를 다시 보자, 어떤 역할을 하는지 차근차근 알아보고 아마도 자주사용하게 될 props 정보 주고받기를 학습하자.

 

DaumPostCode 컴포넌트로부터 주소 검색이 완료됐을때, onComplete 콜백이 호출된다. 주소 검색이 완료된 데이터 ( 선택한 주소 data ) 가 포함된다. 그후, props.onSelect를 통해서 부모 컴포넌트로 데이터를 전달한다.

 

부모컴포넌트 측을 확인해보자

 

    // PopupPostCode 컴포넌트로부터 주소 데이터를 받아 상태를 업데이트하는 함수입니다.
    const handleAddressSelect = (data) => {
        setAddress(data);
        // 이후 처리 로직이 여기에 들어갈 수 있습니다.
        // 예를 들어, 받은 주소 데이터를 폼 필드에 표시하거나 다른 상태로 저장할 수 있습니다.

        console.log(data);

        setJibunAddress(data.jibunAddress);
        setAddress(data.address);
        
    };

<PopupPostCode onClose={closePostCode}
	onSelect={handleAddressSelect}
	/>

 

일단 <PopupPostCode> 쪽을 확인하자, onSelect를 지정한 것으로 인해 해당 자식 컴포넌트에서 데이터를 받아올 수 있다.

 

즉, onSelect={handleAddressSelect}에서, handleAddressSelect에 자식 컴포넌트의 데이터를 넣어주는 역할을 하는 것, 위 코드들을 가지고 jibunAddress, Address라는 state를 만들고, 위 set 함수들을 통해 데이터를 html화 시켜줌으로써 완성했다.