본문 바로가기

Programing/React72

React Redux Toolkit Quick Start 리덕스 툴킷 설치하기npm install @reduxjs/toolkit react-redux파일 생성하기src/├── store/│ ├── store.js // Redux store 설정 파일│ ├── userSlice.js // user slice 파일│ ├── anotherSlice.js // another slice 파일│ └── ... // 추가적인 slice 파일들└── ...Store 작성하기// src/store/store.jsimport { configureStore } from '@reduxjs/toolkit';import userReducer from './userSlice';// 다른 슬라이스가 더 있다면 그 슬라이스의 리듀.. Programing/React 2024. 6. 16.
[코딩애플] Redux-toolkit 리덕스란?Redux는 전역으로 상태를 관리할 수 있게 도와주는 라이브러리이다.이런 라이브러리를 사용하지 않는다면 상위 컴포넌트에서 만든 State가 10개 밑의 deps를 가진 자식 컴포넌트에서 이 state를 전달 받으려면중간에 끼어 있는 부모들은 그 state를 사용하지 않음에도 계속 드릴처럼 뚫고 내려 가야 하는 단점이 있다. 그런데 Redux는 Store라는 중앙 저장소를 만들어 두고 그곳에서 필요한 곳에 바로 state를 전달할 수 있는 장점이 있다. 리덕스 구 버전과 툴킷이라는 신 버전이 있는데, 신버전을 권장한다.사용방법패키지 설치yarn add @reduxjs/toolkit react-reduxStore.js 파일 만들기중앙 저장소인 store 파일을 만든다.// src/store.jsim.. Programing/React 2024. 6. 15.
zustand 상태 관리 zustand란?ㅁㄴㅇㄹzustand의 특징 (장, 단점)장점간결하다쉽다설정이 간단하다성능 최적화가 잘 되어 있다. 불필요한 리렌더링을 방지한다. 단점상태가 커지면 관리가 어려울 수 있다. RTK는 미들웨어 등 구조화된 방법을 통해 대규모 앱에서도 전역 상태 관리가 용이하다.  주요 개념구독 : 상태의 변경을 감지하고 그 변경에 반응하는 컴포넌트만 업데이트 하는 메커니즘을 말한다.예를 들어 유튜브에서 구독을 한 구독자에게만 해당 스트리머의 새 영상 업로드 소식이 전달되는 개념에 빗대면 이해가 쉽다. 기본 사용법설치yarn add zustand스토어 만들기src/zustand/bearsStore.js스토어의 이름 만들기// src/zustand/bearsStore.jsimport { create } fro.. Programing/React 2024. 6. 14.
로그인 하지 않은 상태에서는 헤더가 렌더링 되지 않게 조건부 렌더링 설정하기 헤더를 라우팅하는 컴포넌트에서 아래와 같이 설정해주면 된다.  useLocation 훅 import 하기import { useLocation } from "react-router-dom"; 로그인 되어 있지 않으면 로그인 페이지로 이동시키기const location = useLocation();const isLoginPage = location.pathname === "/login";...return ( {!isLoginPage && } ); Programing/React 2024. 6. 14.
TanStack Query 기본 사용법 TanStack Query란?HTTP 요청을 할 때 서버에서 응답 받은 내용을 가공해서 별도의 상태를 만들 필요 없이 곧바로 사용이 가능하게 해주는 라이브러리이다.기본 코드 스니펫import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider,} from '@tanstack/react-query'import { getTodos, postTodo } from '../my-api'// Create a clientconst queryClient = new QueryClient()function App() { return ( // Provide the client to your App )}.. Programing/React 2024. 6. 14.

티스토리툴바