[TIL] localStorage, React-Query, useMemo, React18 Batching

로컬스토리지에 최근 본 상품 넣는 방법

  //현재 상품 아이디를 로컬스토리지에 넣기
  useEffect(() => {
    // 로컬스토리지에서 'watched' 항목을 가져옴
    let getWatch = localStorage.getItem('watched');
    // 가져온 'watched' 항목을 JSON 형식으로 변환
    getWatch = JSON.parse(getWatch);
    // getWatch가 배열이 아닌 경우 빈 배열로 초기화
    if (!Array.isArray(getWatch)) {
      getWatch = [];
    }
    // 현재 아이템의 인덱스를 getWatch 배열에 추가
    getWatch.push(item.index);
    // 배열 내 중복된 값을 제거
    getWatch = Array.from(new Set(getWatch));
    // 로컬스토리지에 'watched' 항목을 JSON 형식으로 저장
    localStorage.setItem('watched', JSON.stringify(getWatch));
  }, [item.index]);

React Query

1. ajax 요청 자동으로 n초 간격으로 가져오게 하기
2. 요청 실패시 재시도
3. 다음페이지 미리 가져오기
4. ajax 성공/실패시 각각 다른 컴포넌트/HTML보여주기

// index.js
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>
); 

//app.js
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>
  )
}

React-Query 장점

1. server-state (DB 데이터)를 프론트엔드에서 실시간 동기화
   • ajax 요청을 몇초마다 계속 날려서 가져오는 방식이라 http1을 쓰는 서버나 브라우저라면 좀 비효율적
2. 실시간으로 서버에서 데이터를 자주 보내려면 웹소켓이나 server-sent events 같은 가벼운 방식도 있음

필요할 때만 재랜더링 할 수 있게 하는 memo

• Cart 컴포넌트가 재랜더링 될때마다 Child 컴포넌트도 자동으로 재랜더링 되는 것을 막음
• 무거운 작업을 하는 컴포넌트는 memo로 감싸주는 것이 좋음
• memo는 props가 변경될 때만 재렌더링 해줌

  let Child = memo(function (props) {
   console.log('재렌더링됨');
   return <div>자식 컴포넌트 {props.count}</div>;
  });

### useMemo
 * 부모 컴포넌트에서 밖에 있는 함수를 불러와서 작동시킬때, 함수의 복잡성이 높아지면 자식 컴포넌트들도 모두 재랜더링 되는 문제점이 있음
 * 이럴때 useMemo를 사용하면 됨
 * 자식 컴포넌트들이 모두 재랜더링 되는 것을 막아줌
 * 들어있는 컴포넌트가 첫 랜더링 될때 1회만 실행됨
 * 두번째 랜더링 될때부터는 메모이제이션된 값을 반환함

```js
function heavyFunction() {
  console.log('함수 실행됨');
  return 1 + 2;
}

function Cart() {
// [state] 변화시에만 재렌더링
  let result = useMemo(() => {
    return heavyFunction();
  }, [state]); ...

Batching

• 여러번의 state 변경이 일어날때 마지막에 한번 재렌더링되도록 하는 기능
• 리엑트 18 버전부터 자동탑제 되어있음.