[React.js] useState 상태값 초기화로 좋지 못한 사용자 경험 개선

1. 불필요한 렌더링으로 눈살 찌푸려 >.<

마커를 클릭하면 해당 마커에 설정된 방향을 화살표로 표시하는 기능이다. 각 마커는 고유한 화살표의 개수와 방향을 미리 가지고 있다. 따라서 기본 값으로 가지고 있는 형태로 렌더링 되어야 한다. 하지만 마커를 클릭하면 해당 마커 직전의 값에 해당하는 화살표와 값(그림 1 참조)을 렌더링 한 후 해당 마커의 화살표와 값(그림 2 참조)을 렌더링 한다. 이로 인해 사용자로 하여금 좋지 못한 경험을 제공하고 있다.

[그림 1] 이 방향의 화살표 방향 값은 직전 마커의 것인데 화면에-잠깐-렌더링 되었다.

 

[그림 2] 이 방향의 화살표가 현재 마커의 것이다.

 

2. setState 상태 초기화로 해결

새로운 마커를 클릭할 때 직전 마커의 상태값이 존재하고 있기 때문에 발생 문제였다. 프로젝트에서 화살표의 방향에 대한 값은 객체 형태로 useState로 관리되고 있었는데 해당 값을 setState를 이용해 빈 객체로 변경하여 문제를 해결했다. 해당 코드는 아래와 같다.

<UnitMarker
  // (생략)
  onClick={e => {
    setDirectData({}); // 해당 useState 훅
    // (생략)
  }}
/>