[React] 로컬 스토리지

• 넣을 때 localstorage.setItem
• 꺼내올 때 localstorage.getItem
• 삭제 localstorage.removeItem
• 수정은 따로 없음 → 같은 키에 다른 값을 넣으면 덮어 씌워짐
  • 덮어 씌워지지 않도록 해야 데이터가 유지된다.

객체는 그대로 넣으면 안되고, 반드시 JSON형태로 직렬화를 해주어야 한다.

객체의 키말고 값만 가지고 오고 싶으면,

JSON으로 파싱해서 그 중 키가 tel인 것 의 값만 가지고 오도록 한다.

localstorage → 브라우저, 서버를 껐다가 켜도 그대로 남아있다.

App.js

 useEffect (()=> {
    if(localStorage.getItem('watched') == null)
    localStorage.setItem('watched', JSON.stringify( [] ))
  }, [])

Detail.js

    useEffect(()=> {
      //console.log("출력 : " + findId.id )

      let w = localStorage.getItem('watched')
      w = JSON.parse(w) // JSON으로 파싱해서 다시 넣어주기
      w.push(findId.id) 

      localStorage.setItem('watched', JSON.stringify(w))
    },[])

중복된 값이 들어간다.
중복 제거하고 싶으면, 아래 두 줄을 추가해준다.

 useEffect(()=> {
      //console.log("출력 : " + findId.id )

      let w = localStorage.getItem('watched')
      w = JSON.parse(w) // JSON으로 파싱해서 다시 넣어주기
      w.push(findId.id)
      w = new Set(w)
      w = Array.from(w)

      localStorage.setItem('watched', JSON.stringify(w))
    },[])

 

ajax에서 실시간으로 재전송 자동으로 하기

설치 : npm i react-query
index.js에 설정 추가

import {QueryClient, QueryClientProvider } from 'react-query';
const queryClient = new QueryClient();

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

기존 ajax 방식

 axios.get('https://raw.githubusercontent.com/professorjiwon/data/main/userdata.json')
    .then(()=>{ })

다른 방식

 const [resultData, setResultData] = useState('');

      useQuery('userdata', () =>{
      axios.get('https://raw.githubusercontent.com/professorjiwon/data/main/userdata.json')
        .then((result)=>{  
          return setResultData(result.data.name)
        })

    }) 
  
  
  return (
    <div className="App">  
      <Navbar bg="light" data-bs-theme="light">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link onClick={()=>{ navigate('/') }}>Home</Nav.Link>
            <Nav.Link onClick={()=>{ navigate('/cart') }}>Cart</Nav.Link>
            <Nav.Link onClick={()=>{ navigate(-1) }}>뒤로</Nav.Link>
          </Nav>
          <Nav className='me-auto'>{resultData}님 환영합니다</Nav> 
        </Container>
      </Navbar>