[React] 10일차 일기

리액트 너어무 어렵다 공부할 수록 앞에 했던거 점점 까먹는 느낌.. 진짜 복습 엄청 많이 해야할거같다. 코딩애플님 쉽게 설명해주시는데 머리가 안따라갑니다

 

1. 암호화폐 거래소나 SNS같이 실시간 데이터를 가져와야하는 사이트들에 react-query쓰면 좋음

 

2. 설치 방법 : npm install react-query >> index.js가서 const queryClient = new QueryClient() 작성해주고 <QueryClientProvider client={queryClient}> 이걸로 <App>을 감싸면 됨

 

3. let result = useQuery('작명', function(){ return axios.get('주소').then function(파라미터){ return. 파라미터.data}) 하면 ajax요청 끝

 

4. react-query 장점

  1) ajax 요청이 성공/실패/로딩중을 쉽게 파악할 수 있음 (result.data: 성공한 데이터 보여줌 / result.isloading: 로딩중일 때 true값 반환 / result.error: 실패했을 때 true값 반환)

 

  2) 주기적으로 자동으로 재요청(refetch)해줌 ({staleTime: 시간(ms)}해주면 작성한 시간동안 재요청안함

 

  3) 데이터 가져오는걸 실패하면 알아서 재시도해줌

 

  4) state공유 안해도 됨

 

  5) ajax결과 캐싱해줌. 즉 잠시 기억해준다는 의미

 

5. react는 sinple page application이기 때문에 js파일 하나에 모든 코드를 넣음 => 로딩속도가 느림, 따라서 메인페이지 외에 다른 페이지들을 먼저 불러올 필요가 없음

 

6. const 변수명 = lazy(() => import(다른 페이지 경로)) 다른 페이지가 필요해질 때 import 해올 수 있기 때문에 메인페이지 로딩시간이 빨라짐

 

7. 단점은 다른 페이지 넘어갈 때 로딩시간이 생김

 

8. 로딩될 때 로딩중 UI 넣고싶으면 <Suspense fallback ={html태그}>로 컴포넌트 감싸주면 됨. 보통 라우트되는 모든 부분에 UI를 띄우기 때문에 <Routes>에 <Suspense>로 감싸도 됨.

 

9. 기능구현을 다 하면 성능개선을 필수 사항

 

10. 컴포넌트가 변경될 때마다 모든 컴포넌트가 재랜더링 되기 때문에 꼭 필요할 때만 자식 컴포넌트를 재랜더링하려면 memo쓰면 됨

 

11. 함수를 변수에 담고 변수안에 함수를 memo로 감싸주면 된다.

 

12. memo로 재랜더링이 오래걸리는 컴포넌트를 감싸놓으면 좋음

 

13. memo는 props가 변할 때만 재랜더링해줌

 

14. 기존 props랑 신규 props가 같은지 계속 비교하기 때문에 props 관계가 복잡하면 손해임.

 

15. useMemo와 useEffect 사용법이 비슷

 

16. useMemo(() => {return 함수}); 쓰면 컴포넌트 랜더링시 1회만 실행해줌. useEffect와 같아보이지만 차이점은 useEffect는 return이 다 실행되면 실행되지만 useMemo는 랜더링될 때 같이 실행됨.

 

17. state변경함수를 연달아 사용하면 마지막 state에서만 재랜더링 1회함. => 배칭(batcing)이라고 함

 

18. 17버전까지는 ajax요청, setTimeout안에 state변경함수가 있으면 batching이 일어나지 않았음. 18버전 이후로는 batching됨.

 

19. 랜더링시간이 오래걸리는 컴포넌트가 있으면 반응이 느려짐

 

20. 그럴 때 useTransition, useDefferedValue 쓰면 됨. 얘네는 state가 변동사항이 생기면 나중에 처리해줌. 그래서 반응이 빨라짐

 

21. useTransition()을 쓰면 [변수, 함수]가 남음. 보통 변수는 isPending, 함수는 startTransition이라고 작명함.

 

22. startTransition()으로 오래걸리는 state변경함수를 감싸면 다른 코드들보다 나중에 처리해줌.

 

23. isPending은 startTransition()으로 감싼 코드가 처리중일 때 true로 반환해주는 변수이기 때문에 삼항연산자같은 걸로 처리중일 때 UI를 띄어줄 수 있다.

 

24. useDefferedValue(state명)명을 변수에 담아서 사용하면 state가 변동사항이 있을 때 나중에 처리해줌.