리액트 멸망전 2부(完)

리액트를 끝내러 왔습니다. 어후 어제 저녁에 손톱 정리를 했어야 했는데 귀찮다고 미뤘더니 키보드를 누르는 게 영 불편하네요. 오늘은 미루지 않고 꼭 정리하는 걸로,,, 집에 도착해서 저녁을 먹고 나면 8시가 조금 넘는데 정말 저녁에 수면제라도 들어있는지 10시까지 미친 졸음과의 사투를 벌이고 있습니다. 이 사이에 잠들면 사실상 그 날 밤은 사망선고가 내려진 것이구요, 잘 버텨서 꾸벅꾸벅 조는 정도로 끝나면 감사한 수준. 제가 집 가는 지하철에서 '아 여기서 졸면 이따 밤에 잘 못 잠ㅋㅋ' 이러고 버티는데 앞으론 지하철에서 좀 졸아봐야겠습니다. 갑작스러운 생활 패턴의 변화는 아직도 여러모로 저를 힘들게 하는군요. 어제에 이어온 글이기 때문에 사설은 짧게 하고 바로 본론으로 가보겠습니다.

 

Redux를 마무리하던 중 배우게 된 Js 문법이 있는데요, findIndex()입니다. 별다른 건 없구요, 그냥 파이썬의 index()와 비슷한 기능을 가진 함수입니다. 인자로는 콜백함수가, 콜백함수는 조건문을 return 하고, 조건에 맞는 요소의 인덱스를 반환해주는데요, 조건에 부합하는 요소가 여럿이라면 역시나 가장 앞에 있는 요소의 인덱스를 반환해주는 것 같습니다.

 

Redux가 끝난 후엔 localStorage에 대해 배웠는데요

 

 

반년 전에 썼던 게 있다 그쵸ㅋㅋ 개꿀이다 그쵸ㅋㅋ 그나마 추가할 건리액트에서 localStorage를 쓴다고 하면 useEffect()를 활용해서 필요한 저장소를 사이트 접속 시 미리 생성해놓을 수 있다는 것이겠네요. 

 

 

대충 이런 식으로다가,,, 왜 쇼핑몰 사이트에서 최근 본 상품 목록 같은 걸 쓰는데 유용할 것 같네요. 그런데 'a 라는 상품의 상세 페이지에 방문하면 localStorage의 watched 배열에 상품 a를 추가해줘' 라고 코드를 만들어 두면 문제가 하나 생기는데요, 상품 a의 상세 페이지를 두 번 방문한다면,,,?? 그대로 배열에 a 중복행. 그럼 역시 if 문을 써서 뭐 '방문한 상품이 이미 배열에 있으면 패스~' 같은 코드를 짜야겠다 싶은데 강의에선 집합을 추천해줍니다. new Set(array자료)를 통해 중복된 자료를 제거하고(집합의 성질: 중복된 요소를 가질 수 없다) 집합을 다시 배열로 돌려놓는,,, 그런데 생각을 좀 해보면 그냥 if 문을 쓰는 게 낫지 않나,,,?? 싶습니다. 왜냐면 최근 본 상품의 요는 상품을 본 순서대로 정렬되는 것인데 집합은 그 안에 순서라는 게 없는 걸로 알고 있기 때문에(아니면 ㅈㅅ ㅋ) 배열 => 집합 => 배열의 과정을 거치다 보면 의도치 않은 순서가 발생할 수 있을 것 같습니다.

 

다음은 react-query입니다. 실시간 데이터를 사용할 때 요긴하게 쓰이는 라이브러리라고 합니다. 뭐 코인 거래소나 실시간 sns 같은게 있겠지요? 어째서 이게 실시간 데이터를 사용할 때 요긴한 지는 우선 사용법을 익히고 보도록 합시다. 

 

설치할 땐

npm install react-query@3(버전에 따라 다르겠지요,,?)

 

사용할 땐 index.js에 가서

 

 

QueryClient 인스턴스를 만들어주고 <App/>을 client = {queryClient} 속성이 부여된 <QueryClientProvider>로 감싸줍니다. 이 과정에서 필요한 것들은 알아서 import 되는데 안된다면 직접 하시는 걸로,, 그리고 이 react-query를 통해서 ajax 통신을 할 건데요,,,

.
.
.
.

예시를 위해서 axios만 쓴 코드, useQuery 안에 axios를 쓴 코드를 돌려보면서 찾은 건데 배운 버전과 현재 버전의 사용법이 많이 달라졌더라구요. 이 부분은 따로 공부를 더 해서 쓰도록 하는 걸로 하겠습니다. 그치만 사용법이 달라졌다고 해서 효용이 달라진 건 아닌데요, useQuery를 쓰면 뭐가 좋냐!

1. 요청이 성공했는지 실패했는지 로딩 중인지 쉽게 파악 가능하구요

2. 특정 간격마다 자동으로 ajax 재요청(이걸 refetch라고 한다네요)이 이뤄지며 refetch 간격을 따로 설정할 수도 있다고 합니다. 예를 들어 기본 설정이 1초마다 refetch 한다-라면 2초마다, 혹은 더 잦게 refetch 하도록 코드를 짤 수 있다고 합니다.

3. 요청이 실패한 경우(서버가 꺼졌거나 잘못된 주소로 요청을 보냈을 때) 알아서 retry 해주구요

4. state 공유를 안해도 된다는 것입니다. 보통 부모 컴포넌트에서 ajax 요청으로 가져온 데이터를 자식 컴포넌트에서 또 요청하는 것은 비효율적인 성능을 낸다고 하는데 이 부분에서 react-query가 관여하여 비효율을 줄여준다고 하네요

5. ajax 결과를 캐싱해줍니다. 짧은 간격 내에 같은 주소로 ajax 요청을 두 번 보내면 후위 요청시 선수 요청의 데이터를 일단 가져오고 요청을 보냅니다 => UI면에서 빨라보일 수 있겠군요

 

react-query를 마지막으로 이번 포스팅을 마치려고 했는데 예상치 못한 오류가 생겨서 이런 식으로 끝내자니 참 뭐하네요. 이후로 기능개선 관련해서 lazy import, useMemo, useTransition 등의 내용이 있었지만 당장 기능개선이 필요한 기능 자체가 없기에 과감히 생략했습니다. 그걸 또 여기 억지로 쓰자니 그것도 웃기구요.

 

아 그리고 블로그를 하나 더 만들었습니다! 그 동안 들은 강의 교안들을 아카이빙 해둘 생각입니다. 기술이라는 게 금방 금방 바뀐다고 하지만 그런 점을 제외하고라도 쓸만한 팁들이 강의에 꽤 많다고 생각합니다. 그럼 지금 네가 쓰는 블로그는 뭐임? 방구임? 이라고 한다면 뭐랄까 원본 보존의 의미도 있고 사실 지금 쓰는 블로그가 정보를 얻기에 적합하진 않잖아요,,,?? 

 

여튼 뭐 그렇습니다. 어후 김 샌다 그럼 20000