child컴포넌트에서 변경된 값을 parent컴포넌트에서 인지하기
-
SearchMap이라는 컴포넌트 안의 Map컴포넌트에서 map컴포넌트를 클릭할 때마다 클릭한 곳의 좌표값이 생긴다.
-
이 좌표값을 SearchMap 컴포넌트에서 저장하고 사용하고 때마다
parent component :
1
2
3
4
const [marker, setMarker] = useState({
x: null,
y: null,
});
marker라는 변수에 좌표의 x, y값을 담고
1
<Map marker={marker} setMarker={setMarker} />
marker와 setMarker를 <Map>에 props로 보낸다.
set을 prop로 보내면 marker라는 변수의 메모리가 어디에 있는지 가리키는 역할을 한다고 한다.
child component : <Map>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const Map = (props) => {
useEffect(() => {
//지도를 만든 후
kakao.maps.event.addListener(map, "click", function (mouseEvent) {
let latlng = mouseEvent.latLng;
var marker = new kakao.maps.Marker({
position: map.getCenter(),
});
marker.setPosition(latlng);
marker.setMap(map);
props.setMarker({
x: latlng.getLng(),
y: latlng.getLat(),
});
});
});
};
props.setMarker로 변경된 marker값을 넣을 수 있다.
