키워드 검색어로 '고기'를 검색하면 내 주변 5km 반경 이내에 위치한 고기 관련 식당을이 나온다. 그리고 그 위치들을 지도에 마커로 띄우고 있다.

🔥문제점

키워드 검색을 하면 지도에 검색 결과가 마커로 띄워지는데 컴포넌트를 접었다가 펼치면 검색한 키워드와 결과들이 모두 초기화가 되는 문제가 생겼다.

코드를 보면 isSearchFolder는 접은 상태인지 펼쳐진 상태인지 확인하는 변수이다. isSearchFolder가 true라는 것은 펼쳐진 상태라는 것이므로 true이면 SearchPlace 컴포넌트를 불러와서 새로 렌더링이 된다. 이 과정에서 SearchPlace 컴포넌트 내부에 있는 데이터들이 모두 초기화가 된 상태로 불러와진다. 하지만 나는 컴포넌트를 접었다가 펼쳐도 검색된 키워드와 결과들이 그대로 남아 있는 것을 원했다. 그리고 해당 결과에 따른 지도 위에 마커들도 그대로 남아 있기를 원했다.

⚒️해결방법

그래서 생각한 해결 방법은 두가지 방법이 있었다.

💡첫 번째 방법

SearchPlace 컴포넌트 내부에 있는 데이터들을 전역 상태 관리 라이브러리를 사용해서 저장해 놓는 방식이다. 나는 Recoil을 사용해서 내부 데이터들을 저장했었다.

이렇게 하면 데이터들이 전역으로 저장되어 있기 때문에 컴포넌트를 접었다가 펼쳐도 데이터들이 초기화 되지 않고 그대로 남아있다.
그런데 접기 전에 검색했던 데이터들은 펼치고 난 후에도 그대로 남아있어서 해결한 줄 알았는데 다른 키워드를 검색하면 이전 검색 데이터가 사라지지 않고 계속 남아있는 문제가 있었다. 그리고 이 방법은 데이터를 전역으로 관리하고 컴포넌트 자체를 매번 새로 렌더링을 하는 거라 성능 측면에서 좋지 않을 것 같아서 두 번째 방법으로 문제를 해결했다.

💡두 번째 방법

CSS를 이용해 화면에서 숨기거나 보여주는 방법이다. 이 방법은 SearchPlace 컴포넌트를 새로 렌더링하지 않고 렌더링이 되어 있는 상태에서 컴포넌트를 펼치면 화면에 보여주고 컴포넌트를 접으면 hidden으로 숨기는 방식이다.

이렇게 isSearchFolder가 true이면 보여주고 false이면 hidden을 하는 것이다. 그러면 검색어 입력 후 지도에 마커가 띄워진 상태에서 컴포넌트를 접어도 마커가 그대로 지도에 띄워져 있다. 그리고 다시 펼쳐도 검색한 키워드와 결과들도 그대로 남아있다.

💡컴포넌트 새로 렌더링하는 경우 vs CSS를 이용해 화면에서 숨기거나 보여주는 경우

컴포넌트를 새로 렌더링하는 경우

• 장점
  • 메모리 사용 최적화: 사용하지 않는 컴포넌트의 데이터와 상태를 메모리에서 제거할 수 있다. 이는 특히 대규모 데이터를 다루는 컴포넌트에 유용할 수 있다.
  • 상태 초기화: 컴포넌트를 다시 렌더링할 때마다 내부 상태가 초기화되므로, 사용자가 "초기 상태"를 기대하는 인터랙션에 적합하다.
• 단점
  • 성능 저하: 컴포넌트와 그 자식들을 다시 렌더링하는 것은 비용이 많이 드는 작업일 수 있으며, 특히 DOM에 큰 변화를 일으킬 때 성능 저하를 야기할 수 있다.
  • 사용자 경험 저하: 렌더링이 눈에 띄게 느려지면 사용자 경험에 부정적인 영향을 줄 수 있다..

CSS를 이용해 화면에서 숨기거나 보여주는 경우

• 장점
  • 성능 향상: 컴포넌트의 상태와 DOM 요소가 유지되므로, CSS만 조작하여 보여주거나 숨기는 것이 성능 측면에서 효율적일 수 있다. 이 방법은 특히 빠른 인터랙션이 필요한 경우 유용하다.
  • 사용자 상태 유지: 사용자가 입력한 데이터나 컴포넌트의 상태가 유지되므로, 사용자가 작업을 중단했다가 다시 시작할 때 편리하다.
• 단점
  • 메모리 사용량: 숨겨진 컴포넌트도 메모리를 차지하므로, 많은 양의 데이터를 다루는 경우 메모리 사용량이 증가할 수 있다.
  • 복잡한 상태 관리: 여러 컴포넌트가 화면에서 숨겨져 있을 때, 그 상태를 관리하는 것이 복잡해질 수 있다.

새로 렌더링 되는 것이 데이터를 매번 초기화를 하기 때문에 메모리 사용을 최적화 할 수 있다는 장점이 있지만 그만큼 성능이 저하 되고 사용자 경험이 저하되는 단점이 있다.

반면, CSS를 이용해 화면에서 숨기거나 보여주는 경우는 계속 렌더링이 되어 있는 상태이므로 메모리 사용량이 증가할 수 있다는 단점이 있지만 컴포넌트 상태는 계속 유지가 되므로 성능 측면에서는 효율적일 수 있는 장점이 있다.

그래서 나는 컴포넌트를 새로 렌더링하는 방법으로 오류가 생겨서 성능 측면에서 더 효율적인 CSS를 이용해 화면에서 숨기거나 보여주는 경우로 수정해서 오류를 해결했다.