현장 카카오맵 렌더링 문제 개선

nyongho·2021년 12월 8일
0

< 기존 문제점 >

  1. 현장 위치 변경 시 마커와 원을 다시 그려주는데 이 과정에서 맵이 두 번 렌더링 되는 문제

  2. 최상위 부모 컴포넌트에서 API를 호출 후 자식에게 뿌려주는 구조가 아니라 부모의 자식 컴포넌트에서 api를 받아와 그걸 부모의 state 값으로 올려보낸 뒤 다시 자식의 또 다른 자식들에게 뿌려주는 구조

즉, 상태의 변화가 단방향이 아니라 양방향이다 보니 상태관리가 꼬이게 돼 카카오맵에 상태 변화를 제대로 알려주지 못하는 문제가 발생했다.

상태가 부모 => 자식 => 자식의 자식이 아니라 자식 => 부모 => 자식2 => 자식2의 자식 이런식으로 흐르는게 문제였다는 뜻이다.

이러한 문제를 해결하기 위해 일단 데이터 흐름 구조 자체를 최대한 단방향으로 만들어야할 필요성을 느꼈고 다음의 개선이 일어났다.

  1. 자식에서 사용되는 상태를 최상위 부모에서 관리해야겠다고 판단, 상태를 수정하거나 호출하는 API는 모두 최상위 컴포넌트로 옮김.

  2. 카카오맵 렌더링 위치를 최상위 부모 컴포넌트로 변경 (수정사항에 대한 API는 모두 최상위 부모에서 관리하기 때문)

  3. 전역에서 필요한 상태 (radius, info) 등을 최상위 부모로 위치 변경

  4. 이젠 전역에서 필요한 데이터들을 받을 때 자식 => 부모 => 자식 과정을 거치지 않고 부모 => 자식 => 자식의 과정을 거칠 수 있게 됨.

profile
두 줄 소개

0개의 댓글