[React]11. Kakao API 실습

 

리액트 11_Kakao API 실습

 

[카카오 API 설정]

<카카오 개발자 홈페이지>

https://developers.kakao.com/

 

• 내 애플리케이션-등록한 애플리케이션-웹사이트 주소 수정: localhost 주소로 변경(http://localhost:3000)

<카카오맵 문서>

https://react-kakao-maps-sdk.jaeseokim.dev/

 

• public 폴더-index.html에 script 태그 붙여넣기

 

 

• 내 애플리케이션-등록한 애플리케이션-JavaScript 키를 APP KEY 자리에 붙여넣기

 

• kakao map install: install 코드를 terminal에 붙여넣기

 

 

 

[카카오 지도 기본 실습]

1. Map, MapMarker import

-import {Map, MapMarker} from 'react-kakao-maps-sdk'

 

 2. <Map>: 지도 표시하기

• center: 지도 중심위치

-위도(lat)와 경도(lng)를 객체 형태로 표시

• style: 지도 크기(width, height)

 

 

*위도, 경도 찾는 방법: 구글 지도에서 원하는 장소 검색 후-’이곳이 궁금한가요?’ 혹은 ‘주변 검색’ 클릭-위도/경도 복사

 

3. <MapMarker>: 마커 표시, <Map> 내부에 작성

• position: 마커 위치

-위도(lat)와 경도(lng)를 객체 형태로 설정

• 장소이름은 <div>태그로 표시하기

[카카오 지도 활용실습]

1. 카카오 본사 띄우기

• <Map>: 지도 출력

-center: 지도의 중심좌표

-style: 지도의 크기

-level: 지도의 확대레벨

• MapMarker: 마커 표시

-position: 위도(lat), 경도(lng) 설정

 

2. 마커 여러 개 띄우기

• <MapMarker>의 속성값을 관리할 state 생성

 

• state에 저장한 장소 한꺼번에 출력하기

-<Map>의 center 속성값을 state로 관리하기

-map 함수를 활용하여 <MapMarker> 반복하여 출력하기

3. 마우스 이벤트에 따라 마커정보 출력

• 내부 컴포넌트 생성

-return문에서 작성한 position, content 속성 매개변수로 받아오기

-마커에 화면에 출력할지 여부를 관리할 state 생성

-마우스를 올렸을 때와 아닐 때 state값 설정

-state값이 true일 때만 content를 보여주는 조건문 작성(&&연산자 활용)

 

• map함수로 <MakerEvent> 컴포넌트 반복

-position, content, key값 props로 <MakerEvent>로 전송하기

 

4. 버튼 클릭 시 스마트인재개발원 지점 표시하기

• 버튼에 함수 적용하기

• 스마트인재개발원 위치와 지도확대레벨을 관리할 state 생성

• 버튼 클릭 시 지도중심위치, 마커, 지도확대레벨을 변경하는 함수 

[내부 컴포넌트 실습]

[App.js]

• App 컴포넌트  밖: 컴포넌트 선언

const [컴포넌트명(대문자]=( ){ return (내용) }

 

• App 컴포넌트 내 return문 내부 컴포넌트 사용

 

• props 값 보내기

 

• props로 보낸 값 받기

 

(출력결과)