이미지 스로톨링, 폼유효성

sudyn·2023년 5월 18일
0

TIL

목록 보기
2/10

1) 좋아요 연속클릭 방지

  • 문제점: 좋아요를 연속으로 버튼 클릭시 좋아요 개수가 연속 증가하는 현상
  • 시도: debounce로 3초 정도의 지연시간을 설정해 연속 클릭 방지함 → 서버응답 로딩시간이 길어 사용자가 버튼 클릭했음에도 불구하고 반영되지 않는 것으로 오해할 수 있음
  • 해결 : 좋아요 클릭 후 서버 응답을 기다리는 동안은 버튼 비활성화하여 로딩상태를 표시하여 ux개선

2) 폼 유효성 검사

  • 문제점 : 1) 핸들링 해야하는 폼을 useInput 커스텀훅 하나로 처리하는 방법 →

                        폼의 모든 값이 state와 연결되어 있어 값이 변경될 때마다 자식 컴포넌트들에게 불필요한 리렌더링 발생하며 성능 저하 문제 발생
    
                  2) 유지보수의 어려움, 중복, 긴 코드의 가독성 저하 
  • 시도 : 1) 각 입력 필드에 대한 상태를 개별적으로 선언하고 관리하면서 검증 로직은 함수내에서 중복을 최소화시키려해봄→ 가독성 문제 미해결

            2) useCallback과 useMemo로 상태 관리→  불필요한 리렌더링 해결은 했으나,  여전히 긴 코드와 반복적인 작업 필요
  • 해결: react-hook-form으로 불필요한 리렌더링을 줄이고 가독성을 향상

  • 아쉬운점 : 직접 성능 최적화를 위해 로직을 구현해보았으나 위의 문제점들이 해결되지 않았다. 좀 더 효율적이고 특화된 방법이라 생각하고 react-hook-form을 사용해보며

                     라이브러리를 쓰지 않고 직접 구현후, 사용했으나 좀 더 생각해봤으면 다른 방법도 있지 않았을까 하는 아쉬운 점이 있다.
profile
개발계발하는 프론트엔드 개발자🍠

0개의 댓글