⚛️ React

React : memo로 재렌더링 막기 (memo, useMemo)

memo 부모컴포넌트가 재렌더링되면 자식컴포넌트도 항상 함께 재렌더링된다. 이 때 자식컴포넌트가 무겁다면 특정 버튼을 클릭할 때마다 모두 재렌더링 되어 로딩시간이 걸리는 등 문제가 생길 것이므로, memo로 자식컴포넌트가 특정 상황에서만 재렌더링되도록 작성해주면 좋다. 쓰기 전 주의사항 memo로 감싼 자식컴포넌트는 기존 props와 현재 props를 검사해 props가 변할 때만 재렌더링한다. 그러므로 props가 매우 길고 복잡하다면 오히려 memo를 쓰는 것이 손해일 수 있다. 전 function 컴포넌트(){}는 물론 당연히 이렇게도 표현이 가능하다. let Child = function(){ return 자식컴포넌트 } 후 memo를 import 해온 후 memo()로 function(){}을 ..

React : lazy로 로딩속도 향상시키기 (lazy, Suspense)

lazy 리액트로 만드는 Single Page Application는 html,js가 한 파일만 생성되기 때문에 무거워져 속도가 느리게 된다. 그럴 땐 파일을 쪼개면 되는데, lazy를 쓰면 된다. 전 import Detail from './Routes/Detail.js' import Cart from './Routes/Cart.js' 위 코드에서 Detail과 Cart js는 첫 페이지에서 불러올 필요가 없기 때문에 아래같은 문법으로 import하면 된다. 후 import { createContext, lazy, Suspense, useEffect, useState} from 'react'; // 여기서 lazy, Suspense const Detail = lazy( () => import('./Rou..

React : 개발자도구 크롬 확장프로그램 (React/Redux Developer Tools)

크롬 확장프로그램 스토어 https://chrome.google.com/webstore/ Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com React Developer Tools 기존 개발자 도구에서 react 구조를 찍어보며 state, props 등을 확인할 수 있다. Profiler 탭에서는 성능확인도 할 수 있다. (녹화 버튼 → 페이지 조작 → 녹화 중지버튼) 오래 걸리는 경우는 대게 서버에서 ajax 요청결과가 늦게 도착해서 그렇다. Redux Developer Tools Redux store에 있던 state를 전부 확인 가능하며, dispatch 날릴 때마다 어떻게 바뀌었는지 로그를 남겨준다. 출처 : 코딩..

React : 실시간 데이터가 중요할땐 react-query (설치/사용), RTK Query

** ReactDOM.createRoot는 React 18부터 도입된 새로운 렌더링 API이다. 그러나 @tanstack/react-query 패키지는 아직 React 18에 대한 완전한 지원을 제공하지 않을 수 있어서, @tanstack/react-query와 ReactDOM.createRoot를 함께 사용할 때 문제가 발생할 수 있다..고 하는데 그래서 계속 react-query를 설치하면 useEffect가 null이 되는 오류가 일어나고 있다. 쓸 때 다시한번 볼 것. react-query ajax를 쓰다 보면 다양한 기능들(몇초마다 자동으로 데이터를 가져오기/다음 페이지 미리 가져오기/요청실패시 몇초 간격으로 재시도/ajax 성공이나 실패시 각각 다른 html 보여주기)을 써야 할 때가 있다. ..

React : 최근 본 상품 만들기 (localStorage, map, JSON)

조건 useNavigate훅을 사용한 상세보기 페이지("/detail/:id"형태)에 접근하면 해당 상품의 id 번호를 최근 본 상품에 업데이트한다. 여기서 최근 본 상품은 항상 옆에 떠 있는 플로팅 박스이다. 풀이 App.js function App() { let getWatched = localStorage.getItem('watched'); ... useEffect(() => { // 로컬스토리지 'watched'가 존재하지 않을 때만 빈 배열을 생성 if (!getWatched)) { localStorage.setItem('watched', JSON.stringify([])); } }, []); ... return ( ... // getWatched가 존재하면 Watched 컴포넌트를 랜더링 //..

React : 상품을 장바구니에 추가하기 (immer, redux, action, payload)

조건 상세페이지에서 버튼을 누르면 장바구니페이지에 해당 상품이 업데이트된다. 풀이 store.js import { createSlice } from '@reduxjs/toolkit' let cart = createSlice({ name : 'cart', initialState : [ {id : 0, name : 'White and Black', count : 2}, {id : 1, name : 'Red Knit', count : 1} ] , reducers : { ... addCart(state, action){ const newCart = action.payload; return [...state, newCart]; } } }) export let { changeName, changeCount, add..