refactor: 마커 렌더링 방식을 개선한다 #924
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 기본 마커 렌더링 - 카페인 마커 렌더링 [#914]
- 다음의 복잡한 처리들을 리액트에 위임하는 구조로 변경 (기존에는 훅이 이를 대체했음) - 중복 마커 생성 방지 - 영역 밖 마커 삭제 [#914]
- 현재는 infoWindow를 특정 메서드를 통해 직접 제어하는 방식을 사용했지만, 마커 컴포넌트에 isOpen props를 넘겨 이를 제어하는 방식으로 해보고자 함. [#914]
- 검색 결과로 화면에 존재하지 않는 마커를 생성할 때의 과정 수정 - 마커가 렌더링 될 때 마커 인스턴스 전역 상태에 지금 렌더링 하려는 마커가 포함되어 있다면 재생성을 하지 않는 로직 추가 [#914]
gabrielyoon7
reviewed
Nov 9, 2023
| @@ -5,7 +5,9 @@ import DataDownloader from '@ui/DataDownloader'; | |||
| import CarFfeineMapListener from './CarFfeineListener'; | |||
|
|
|||
| const UserFilterListener = lazy(() => import('./UserFilterListener')); | |||
| const MarkersContainers = lazy(() => import('@marker/MarkerContainers')); | |||
| const MarkersContainers = lazy( | |||
| () => import('@marker/components/MarkerContainers/MarkerContainers') | |||
gabrielyoon7
reviewed
Nov 9, 2023
Comment on lines
16
to
23
| useLayoutEffect(() => { | ||
| // 검색 결과로 강제 생성한 마커에 대해선 새로운 마커 생성을 시도하지 않도록 한다. | ||
| if (markerInstanceStore.getState().every(({ id }) => id !== station.stationId)) { | ||
| const unMount = renderDefaultMarker(station); | ||
|
|
||
| return unMount; | ||
| } | ||
| }, []); |
gabrielyoon7
approved these changes
Nov 9, 2023
feb-dain
approved these changes
Nov 9, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📄 Summary
이전에 마커 렌더링 최적화를 위해 충전소 마커를 렌더링 하는 구조를 크게 수정했었습니다. 문제는 해결할 수 있었으나 다음의 문제점이 존재했습니다.
문제의 원인인 줄 알고 있었던 잦은 상태 변경을 최소화 하고자 구조를 수정했었지만 다시 한번 원인을 분석해본 결과 useEffect의 사용이 문제가 됨을 알 수 있었습니다. 테스트 해본 결과 useLayoutEffect를 사용해 개선할 수 있었던 문제였으므로 이를 개선했습니다.
개선 이후 다음과 같은 효과가 있을 것으로 기대합니다.
🕰️ Actual Time of Completion
4시간
🙋🏻 More
좀 무거운 구조 개선이 있어서 혹시 버그가 있을 수 있는지 한번 다른 기능들 사용해주시면 좋을 것 같습니다.
close #914
🚀 Storybook