[React] 개발 팁

1. 성능최적화 - 검색 (Debounce 적용)

 

단순 검색을 놓게되면 abc를 입력할때 a, ab, abc로 호출해서 검색한다.

검색어가 입력될때까지 어느정도 딜레이를 주는 방식이 debounce로 0.5-0.7초 정도를 기본으로 줄 수 있다.

https://velog.io/@sjoleee_/debounce-throttle-%EC%A0%95%EB%A6%AC

[React] 검색에서 Debounce 적용해보기

 

2. 컴포넌트 소개 - 무한스크롤

 

보통 목록을 무한스크롤로 하게되는데 보통 세가지 방식을 사용한다.

1) 그냥 하단에 들어가자마자 다음 페이지를 불러온다 (여기서 주의할 점은 가끔 타이밍이 안맞거나 순서가 잘못되면 정말 무한스크롤이된다.) 즉 사용자 위치가 계속 하단에 머무르기때문에 무제한으로 다음페이지를 호출함을 조심해야한다.

 

2) 이를 개선하기 위해 두가지 방법이 보통 존재한다. 그 중 첫번째는 원천 차단을 위해 아예 더보기 버튼을 두면 불러오는 방식.

3) 또 다른 방식은 한 번 아래로 더 드래그를 내리면 불러오는 방식이 있다.

 

https://velog.io/@somda/FE-React%EB%A1%9C-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%9D%84-%EA%B5%AC%ED%98%84%ED%95%B4%EB%B3%B4%EC%9E%90

[FE] React로 무한 스크롤을 구현해보자

 

3. 컴포넌트 소개 - Fab(플로팅 액션 버튼)

떠있는 버튼으로 자주사용하지만 seamless한 방식으로 전달할때 도움이 된다.

아예 메뉴를 구성하려면 차라리 하단에 네비게이션바를 두는게 유리하다.

https://brunch.co.kr/@327roy/58

화면에 항상 노출되는 중요한 기능, 플로팅 버튼