읽은 문서들

Image Optimization

• next-optimized-images 패키지

Redux

• 리덕스 잘 쓰고 계시나요?
  리덕스를 사용할 때 고려하면 유용한 정보를 모았습니다.
• https://react.vlpt.us/redux-middleware/10-redux-saga.html

SWR (Data fetching)

• React 개발자라면 꼭 알아야하는 SWR
• SWR을 사용한 useRequest, 리엑트 Data Fetching

SWR

장점 : 캐시 관리 시스템 잘 되어 있음
(fetch 요청 api 엔드포인트별로 최적화해줌)

기존 방식

useEffect에서 api call -> 받아온 정보를 state에 넣어서(setData) -> 컴포넌트에 뿌려준다

👉👉👉 data 받아오는 동안 화면에 data를 그려주지 못 함 ····

useSwr

1. 기본 변환했을 때
   

   (fetcher의 url 파라미터는 '/api/'가 들어가게 됨.)

2. UX 개선해보기

   useSwr의 mutate 함수 : 캐시 업데이트시에 사용

• 응답 오기 전에 먼저 화면 보여주기
  ==> post 요청하고 payload로 일단 화면에 먼저 보여주고
  -> response오면 해당 값으로 다시 painting!

• 같은 api endpoint 를 여러 컴포넌트에서(한 화면에서) 호출할 경우 1번만 call하여 최적화
  ==> useSwr로 동일한 endpoint의 api 여러 번 호출
  -> 1번만 호출하여 해당 값으로 캐싱해서 다른 컴포넌트에서도 사용

➡️ 리소스 사용 효율적으로 가능!

추가 Options

revalidate on focus
같은 화면 두 탭/창에서 켜놓았을 경우

-> if, A 화면에서만 데이터 update 발생(ex. 투두리스트 1개 추가)
-> B화면은 투두리스트가 추가되지 않은 상태
-> B화면에 onFocus시에 자동으로 update된 data를 그려줌! 🤯
(Behind the scene: B에 onFocus 시에 해당 api를 GET요청해서 revalidate)

refresh interval
: 폴링 기능
세팅한 interval 시간마다 해당 api 다시 요청 ===> 수강신청 페이지에 사용하면 유용하겠다.