React+router+redux+다음 지도 문의

지도/로컬 API
#1

지도/로컬 API에 대한 문의게시판입니다.
안녕하세요

제목처럼 react v16, react-router v4, redux 3을 사용해서 개인적인 프로젝트 진행중에 있습니다
우선 구현하려는 부분은 지도에 클러스터를 생성 후 클릭하여 전체 리스팅 페이지로 이동한 뒤 다시 뒤로가기를 누르면 지도 및 클러스터를 원래대로 원복시켜놓으려고 합니다

여러가지 방법을 고려하다가 결국 기존 react state로 관리되던 것들을 다 redux로 밀어넣고 해당 데이터를 통해 뒤로가기 후 redux에 저장되어있는 데이터를 가지고 다시 다른 컴포넌트들은 원복시키게 되었는데
지도의 중심점이 자꾸 틀어져서 나옵니다.

코드는 기존 angular코드를 react로 포팅하는 작업이여서 매우 크기 때문에 가능하면 말로 설명드리고자 합니다
우선 map 컴포넌트에서 componentWillUnmount에서 지도의 현상태를 저장합니다

componentWillUnmount() {
    let {isShowMap} = this.props
    if (isShowMap && this.map) {
        var position = this.map.getCenter();
        const newLat = position.getLat()
        const newLng = position.getLng()
        const level = this.map.getLevel()
        this.props.saveMapState({lat: newLat, lng: newLng, level})
    }
}

(this를 쓰는 이유는 이전 작업자가 모든걸 rootScope에 때려넣어서… 귀찮아서 저도 this에 다 때려넣었습니다 ㅠ)

이 값을 저장해두고 다시 mount될 때 최초 페이지 로딩 때 처럼 new daum.maps.Map(container, options)
를 호출해서 지도를 생성합니다

생성시점에 lat lng찍어보면 저장된 값을 잘 넣어주는데 유독 뒤로가기를 통해 이전 페이지로 돌아올 경우 중심지점이 틀어져있습니다. 100%는 아니지만 제가 인자로 넘기는 중앙값이 좌상단 모서리에 위치하는 듯 합니다.

상황을 요약하자면
뒤로가기시 지도를 다시 그릴 때 option에 center값이 지도의 중앙이 아니라 좌상단 모서리에 위치하는 것으로 보입니다
혹시 이 현상에 관해 제가 놓치는 것이 있을까요?

더 필요하신 정보있으시면 알려주세요

감사합니다

카카오맵이 로드가 되지 않습니다
#2

리액트 라이프사이클 중, 어느 시점에 데이터를 넣어주나요?
제가 안해봤지만 중심이 좌상단이라면
지도 API에서 리액트 뷰 element의 width, height 값이 0 일때를 기준으로 계산하고
그것을 반영하는 것 같습니다.

지도 API 호출 시점을 좀 더 뒤로 미뤄서(다른 라이프사이클 hook에서) 시도해 보시길 바랍니다.

#3

지도 생성은 componentDidMount에서 하고있습니다
같은 코드로 페이지 최초 진입시에는 문제가 없으나 뒤로 가기시에만 발생하고 있습니다

그리고 혹시나 size를 잘못보고그러나해서
맵 생성 후에 map이 들어갈 container의 스타일 조정해서 width, height 맞춰주고 map.relayout()함수도 호출해봤으나 나아지지않네요

좌표 값 기준으로 lat이 0.02, lng가 0.04가 차이나네요 실제 넣어준 값보다
(강제로 뒤로가기 후 지도 생성시 값을 저만큼 더해줘서 했더니 그 값에 또 저만큼 더해져서 지도가 생성되네요)

#4

정확한건 페이지를 봐야 알겠지만

map container 엘리먼트에 padding 값이 있다면 그럴 수 있습니다.

이것 말고는 저도 왜 그런 현상이 일어나는지 감이 오지 않네요 ^^;

#5

padding값은 없고 top값은 들어가있어요
position은 absolute로 잡아서 위에 헤더에서 떨어져서 보이게 했는데요
제가 css는 하나도 몰라서 혹시 이게 관련이 있을까요?

#6

포지션은 상관 없을겁니다.

흐음… 감이 잘 안오네요…

did mount hook에서 setTimeout을 걸어서(100ms 정도) setCenter() 혹은 지도 중심 지정을 해 보시고 어떤 결과가 발생하는지 확인해보세요.
타이밍 문제라면 정상출력 될겁니다.

아니라면 위에 말씀드렸듯…
페이지 전체가 어떻게 구성되어 있는지 모르는 제가 도움드릴 수 있는게 없네요.

#7

setTimeout으로 했더니 잘되네요 왜 이생각을 못했을까요 (0으로 줘도 잘되네요)
잘 작동하는걸로 확인했습니다
감사합니다!

1개의 좋아요