✨ React 정리 - 12) React-Query, local & Session Storage ✨

✔️ React-Query

실시간 데이터를 보여줘야 하는 사이트에 유용한 ajax요청 관리 라이브러리

사용방법

1. VSC 터미널에서 npm install react-query

2. index.js에서 해당 코드로 셋팅하기

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

<QueryClientProvider client={queryClient}> // 기존 App태그를 해당 태그로 감싸기
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </QueryClientProvider>,

3. app.js에서 react-query로 ajax 요청

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

3-1. 위에 코드를 비동기화로 변경
비동기화로 코드를 리팩토링하게되면 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있는 장점이 있다.

let result = useQuery('data', async () => {
    const a = await axios
      .get('https://codingapple1.github.io/userdata.json');
    return a.data;
  });
  console.log(result.data);

장점

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

result라는 변수에 ajax 현재 상태가 알아서 저장됩니다.

• ajax요청이 로딩중일 땐 result.isLoading 이 true가 됩니다.
• ajax요청이 실패시엔 result.error 가 true가 됩니다.
• ajax요청이 성공시엔 result.data 안에 데이터가 들어옵니다.

function App(){
  let result = useQuery('작명', ()=>
    axios.get('url')
    .then((a)=>{ return a.data })
  )

  return (
    <div>
      { result.isLoading && '로딩중' } // 로딩중
      { result.error && '에러남' } // 오류
      { result.data && result.data.name } // 정상 작동
    </div>
  )
}

2. 자동으로 ajax 재요청가능합니다.

페이지 체류하고나서 일정시간이 경과하거나, 다른 창으로 갔다가 다시 페이지로 돌아오거나, 다시 메인페이지로 돌아갈 때, 여러 경우에 알아서 ajax 요청을 다시 해줍니다.
재요청 끄는 법, 재요청간격 조절하는 법도 있습니다.

{staleTiem : 요청할시간ms간격} // 1000 = 1초 간격
{staleTiem : 0} // 재요청 끄기

3. 실패시 자동으로 재시도합니다.

4. ajax로 가져온 결과는 state 공유 필요없습니다.

---

✔️ local Storage

브라우저에서 제공하는 반영구적 데이터 저장소

특징

1. key : value 형태로 저장이 가능
2. 최대 5MB 까지 문자만 저장 가능
3. 사이트를 재접속해도 브라우저 데이터 삭제하지 않을 시 반영구적으로 보존
4. 서버가 아닌 유저의 브라우저에 데이터를 저장
5. 크롬 기준 개발자도구(F12)에서 Application 탭에서 확인 가능

사용방법

1. 데이터 저장 : localStorage.setItem('key','value')
2. 데이터 출력 : localStorage.getItem('key')
3. 데이터 삭제 : localStorage.removeItem('key')

   4. 데이터 수정 : 수정하는 문법은 별도로 없기 때문에 따로 꺼내서 수정하고 저장해야한다.

array / object 저장

array / ojbect를 저장하려면 json형식으로 변경해야한다.
JSON.stringify() : array / ojbect를 JSON형식으로 변경한다.
JSON.parse() : 저장한 데이터의 JSON형식을 제거한다.

let obj = {name : 'kim'};
localStorage.setItem('data', JSON.stringify(obj));
let getObj = localStorage.getItem('data');
console.log(JSON.parse(getObj));

---

✔️ Session Storage

브라우저에서 제공하는 휘발성 데이터 저장소

특징

1. 브라우저 종료시 데이터 제거

사용방법

1. 데이터 저장 : sessionStorage.setItem('key','value')
2. 데이터 출력 : sessionStorage.getItem('key')
3. 데이터 삭제 : sessionStorage.removeItem('key')

   4. 데이터 수정 : 수정하는 문법은 별도로 없기 때문에 따로 꺼내서 수정하고 저장해야한다.