본문 바로가기

분류 전체보기402

2024-06-15 TanStack Query로 서버 상태 관리하기 기존의 내 프로젝트는 axios를 통해 json server에서 데이터를 불러오고 있었다. 그리고 이를 통해 CRUD를 구현하고 있었는데, 이것을 TanStack으로 관리해보고자 한다. 참고로 CRUD에서 R은 useQuery를, CUD는 useMutation을 이용한다. TanStack과 Axios로 json-server에 GET 요청 보내기 (useQuery)기존 코드는 아래와 같다.function App() { const [expenses, setExpenses] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); useEffect(() => { con.. Programing/TIL 2024. 6. 16.
React-Router-dom Page Routing Quick Start 패키지 설치yarn add react-router-dommain.jsx BrowserRouter 설정import React from 'react'import ReactDOM from 'react-dom/client'import App from './App.jsx'import './index.css'import { BrowserRouter } from 'react-router-dom'ReactDOM.createRoot(document.getElementById('root')).render( )필요한 컴포넌트에서 페이지 라우팅 설정import { Route, Routes } from 'react-router-dom'import './App.css'import Donation from '../pa.. Programing/React 2024. 6. 16.
React BootStrap Quick Start 공식 사이트https://react-bootstrap.netlify.app React Bootstrap | React BootstrapThe most popular front-end framework, rebuilt for Reactreact-bootstrap.netlify.app패키지 설치npm install react-bootstrap bootstrapMain.jsx에 부트스트랩 CSS Importimport 'bootstrap/dist/css/bootstrap.min.css';부트스트랩 문서를 보고 필요한 컴포넌트 Import 복붙 사용import Accordion from 'react-bootstrap/Accordion';function BasicExample() { return ( .. Programing/CSS 2024. 6. 16.
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.

티스토리툴바