[코딩애플] 쇼핑몰 프로젝트 Part8 - localStorage, react-query

✏️ localStorage

- 새로고침하면 브라우저는 html css js 파일들을 처음부터 다시 읽기 때문에 모든 state 데이터는 리셋된다.
- 이걸 해결하기 위해서는 state 데이터는 서버로 보내 DB에 저장하거나 LocalStorage에 저장하는데
- 오늘 배울 내용은 LocalStorage에 관해서이다.

- LocalStorage는 쉽게 말해 유저의 브라우저에 몰래 정보를 저장하고 싶을 때 쓰는 공간인데 유저가 브라우저 청소를 하지 않는 이상 영구적으로 남아있다.

크롬개발자 도구에서 Application 탭에 들어가면 볼 수 있다

- 사이트마다 5MB 정도의 문자열을 저장할 수 있고
- object 자료와 비슷하게 key/value 형태로 저장한다.

✏️ localStorage 문법 
- 그냥 js 파일 아무데서나 다음 문법을 쓰면 localStorage에 데이터 입출력할 수 있다.

localStorage.setItem('데이터이름', '데이터');  // 데이터 추가
localStorage.getItem('데이터이름');  // 데이터 읽기
localStorage.removeItem('데이터이름')  // 데이터 삭제

 

✏️ localStorage에 array/object 자료를 저장하려면
- 문자만 저장할 수 있는 공간이라 array/object를 바로 저장할 수는 없다.
- 강제로 저장해보면 문자로 바꿔서 저장해주는데 그럼 array/object 자료가 깨져서 저장된다.
- 그래서 편법으로는 array/object를 JSON으로 변환시켜 저장한다.

// array/object -> JSON
localStorage.setItem('obj', JSON.stringify({name:'kim'}) );  // "{"name":"kim"}"

// JSON -> array/object
var a = localStorage.getItem('obj');
var b = JSON.parse(a)  // JSON -> array/object

- JSON.stringify() 라는 함수에 array/object를 집어넣으면 그 자리에 JSON으로 변환된걸 남겨준다.
- 다시 JSON -> array/object로 변환하고 싶으면 JSON.parse() 를 사용하면 된다.

💁‍♀️ 최근 본 상품 UI 기능 만들기
1. 누가 Detail페이지 접속하면
2. 현재 페이지에 보이는 상품id 가져와서
3. localStorage에 watch항목에 있던 [ ] 에 추가

// Detail.js

useEffect(()=>{
  let 꺼낸거 = localStorage.getItem('watched')
  꺼낸거 = JSON.parse(꺼낸거)
  꺼낸거.push(찾은상품.id)

  //Set으로 바꿨다가 다시 array로 만들기 -> 중복 제거
  꺼낸거 = new Set(꺼낸거)
  꺼낸거 = Array.from(꺼낸거)
  localStorage.setItem('watched', JSON.stringify(꺼낸거))
}, [])

 

✏️ localStorage에 state를 자동저장되게 만들고 싶으면
- redux-persist 이런 라이브러리 설치해서 쓰면 redux store 안에 있는 state를 자동으로 localStorage에 저장해준다
- state 변경될 때마다 그에 맞게 localStorage 업데이트도 알아서 해줌
- 하지만 셋팅문법 복잡하고 귀찮다.

- 그래서 요즘은 신규 사이트들은 Redux 대신 Jotai, Zustand 같은 라이브러리를 사용한다.
- 같은 기능을 제공하는데 셋팅도 거의 필요없고 문법이 훨씬 더 쉽고 localStorage 자동저장기능들도 있다.

✏️ react-query

! 업데이트 사항
→ 라이브러리 이름이 react-query에서 @tanstack/react-query로 바꿔어서
1. 설치시엔 이렇게 입력

npm install @tanstack/react-query@3

2. import 해서 사용할 땐 이렇게 입력

import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'

3. useQuery 쓸 땐 '작명' 말고 ['작명']

useQuery(['작명'],

 

💁‍♀️ ajax 요청하다보면 이런 기능들이 가끔 필요하다
→ 몇초마다 자동으로 데이터 다시 가져오게 하려면?
→ 요청 실패시 몇초 간격으로 재시도?
→ 다음 페이지 미리가져오기?
→ ajax 성공/실패시 각각 다른 html을 보여주려면?

이럴 때 사용하는 것이 react-query 라이브러리이다.

✏️ react-query 설치 & 셋팅
- 터미널에서 npm install react-query 하고 index.js 파일 열어서 1번 2번 3번 하면 된다.

import { QueryClient, QueryClientProvider } from "react-query"  //1번
const queryClient = new QueryClient()   //2번

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <QueryClientProvider client={queryClient}>  //3번
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </QueryClientProvider>
);

 

✏️react-query로 ajax 요청하는 법
- 그냥 ajax 요청해도 되는데 react-query를 써서 ajax 요청 날리면 더 편리한 기능을 제공한다.

// 상단에 useQuery import 해온 뒤

function App(){
  let result = useQuery('작명', ()=>
    axios.get('https://codingapple1.github.io/userdata.json')
    .then((a)=>{ return a.data })
  )
}

 

장점1. ajax 요청 성공/실패/로딩중 상태를 쉽게 파악할 수 있다.

function App(){
  let result = useQuery('작명', ()=>
    axios.get('https://codingapple1.github.io/userdata.json')
    .then((a)=>{ return a.data })
  )

  return (
    <div>
      { result.isLoading && '로딩중' }
      { result.error && '에러남' }
      { result.data && result.data.name }
    </div>
  )
}

- result라는 변수에 ajax 현재 상태가 알아서 저장된다.
→ ajax 요청이 로딩중일 땐 result.isLoading이 true가 된다.
→ ajax 요청이 실패시엔 result.error가 true가 된다.
→ ajax 요청이 성공시엔 result.data 안에 데이터가 들어온다.

- 그래서 "ajax 로딩중일 땐 <A /> 보여주세요!", "ajax 성공시엔 <B /> 보여주세요!" 직접 개발할 땐 state부터 만들어야 했었는데 얘는 그럴 필요가 없다.

장점2. 알아서 ajax 재요청해준다.
- 페이지 체류하고나서 일정시간이 경과하거나,다른 창으로 갔다가 다시 페이지로 돌아오거나, 다시 메인페이지로 돌아가거나.
- 이런 여러 경우에 알아서 ajax 요청을 다시 해준다. (재요청 끄는 법, 재요청간격 조절하는 법도 있음)

장점3. 실패시 재시도 알아서 해준다.
- 잠깐 인터넷이 끊겼거나 서버가 죽었거나 그러면 ajax 요청이 실패한다.
- 실패했을 때는 얘가 알아서 4-5회 정도 재시도를 해줘서 편리하다.

장점4. ajax로 가져온 결과는 state 공유 필요없다.
- 지금 App 컴포넌트에서 유저이름 가져오는 ajax 요청을 날리고 있는데
- 그 유저 이름 결과가 Detail 컴포넌트에도 필요하면 유저이름을 props로 전송해야한다.
- 하지만 props 전송할 필요없이 Detail 컴포넌트에다가 유저이름 ajax 요청하는 코드 똑같이 또 적으면 된다.

- react-query는 ajax 요청이 2개나 있으면 1개만 날려주고
- 캐싱 기능이 있기 때문에 이미 같은 ajax 요청을 한 적이 잇으면 그걸 우선 가져와서 사용한다.

💁‍♀️ react-query가 주장하는 장점은
- server-state (DB 데이터)를 프론트엔드에서 실시간 동기화해주는걸 도와준다고 한다.
- 근데 ajax 요청을 몇초마다 계속 날려서 가져오는 방식이라 http1을 쓰는 서버나 브라우저라면 좀 비효율적일 수도 있다.

- 실시간으로 서버에서 데이터를 자주 보내려면 웹소켓이나 server-sent events 같은 가벼운 방식도 있다.
- 그래서 react-query는 ajax 관련 기능개발을 편하게 할 수 있는데에 의의가 있다.

💁‍♀️RTK Query 라이브러리도 있다
- ajax 요청 후 Resux state 변경하고 싶으면 Slice 안에서 관리가능하게 도와준다.
- 그리고 ajax 요청하는 코드가 100만개 있으면 그걸 편리하게 관리할 수 잇게 도와준다.(단 코드가 조금 더러워질 수도..!)

---

본 포스팅은 << React 리액트 기초부터 쇼핑몰 프로젝트까지! >> 강의를 참고합니다.