생각하다 생각하다

리액트에는 ContextAPI, Redux, MobX 등 전역으로 상태관리를 하기 위한 많은 선택지가 있다. Apollo Client도 그 중 하나의 선택지로 로컬에서 전역 상태관리를 하기위해 사용할 수 있다. Apollo Client란 Apollo Client는 GraphQL 기반의 상태 관리 라이브러리이다. 클라이언트 어플리케이션의 GraphQL과 데이터 교환을 돕는다. Apollo Client의 기능 1. graphQL API에서 데이터를 fetch해올 수 있다. 2. 어플리케이션에서 로컬로 상태 관리를 할 수 있게 해준다. 즉, 서버에 있는 데이터를 가지고 오고, 로컬에 있는 데이터를 관리할 수 있게 해준다. 그리고 이 두 종류의 데이터를 동기화할 수 있게 한다는 것이 큰 장점이다. Apollo ..

React Hook Form 설치 & import하기 npm i react-hook-form import { useForm } from "react-hook-form" register 함수 사용하기 const {register} = useForm(); register는 form에 input을 등록(register)할 때 사용된다. react-hook-form은 페이지에 어떤 input이 있는지 모르기 때문에 현재 form에 어떤 input이 어디에 있는지 등에 대한 정보를 알려준다. 원래 register의 내용은 name, onBlur, onChange, ref 이다. register object의 property들을 추가하기 위해 '...' 연산자를 이용해 prop으로 넣는 것이다. 원래는 이런 느낌 ..

https://tanstack.com/query/latest/docs/react/devtools Devtools | TanStack Query Docs Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! 🥳 When you begin your React Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of React Query and will like tanstack.com DevTools란? Query가 어떻게 작동하고 저장되는지 볼 수 있게 하는 툴이다..

axios 설치하기 $ npm i axios axios란? fetch를 하는 adapter라고 보면 된다. axios를 사용하면 await fetch, response, json 을 할 필요가 없어진다. import axios from "axios" const BASE_URL = "http://127.0.0.1:8000/api/v1" export async function getRooms() { const response = await axios.get(`${BASE_URL}/rooms/`); return response.data; } axios는 reactQuery로만 fetch했을 때 했던 await fetch, response, json 등의 동작을 내부적으로 하기 때문에 위 코드로 수정해줄 수 있..

TanStack Query(React Query) 사용하기 편의상 ReactQuery라고 부를텐데 이 reactQuery를 이용해서 서버 fetch를 더 간단하고 편리하게 할 수 있다. https://tanstack.com/query/latest TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue tanstack.com TanStack Query 설치하기 $ npm i @tanstack/react-query src/index..

데이터 fetch하기 django에서는 시스템을 보호하고 있기 때문에 아무데서나 fetch를 해올 수 없기 때문에 이를 설정하기 위해 cors-headers를 설치할 필요가 있다. 데이터를 fetch하기 위해서 먼저 django-cors-headers 설치하기 그런데 django-cors-headers란? cors-headers는 특정 도메인에서 '나의 서버에서 브라우저로 fetch할 수 있는 사람'을 지정할 수 있게 해준다. 1. 백엔드에 cors-headers를 설치해준다. python -m pip install django-cors-headers poetry 환경일 경우 poetry add django-cors-headers 나는 poetry 환경을 사용하고 있기 때문에 아래 코드를 입력했다. 2...

React Router v6 이전의 react 라우터 작성 방식 6.4의 새로워진 라우터 작성 방식 import { createBrowserRouter } from "react-router-dom"; const router = createBrowserRouter([]) createBrowserRouter라는 함수를 이용해서 이 안에 라우터 배열을 두고 사용한다. path = "url" element = 해당 링크에서 보여줄 컴포넌트 import { createBrowserRouter } from "react-router-dom"; import Root from "./components/Root"; const router = createBrowserRouter([ { path: "/", element: }..

src폴더 내부에 components 폴더와 routes 폴더를 만든다. components/Router.js import React, {useState} from "react"; import { HashRouter as Router, Route, Switch } from "react-router-dom"; import Auth from "../routes/Auth"; import Home from "../routes/Home"; const AppRouter = () => { // 로그인 상태관리 const [isLoggedIn, setIsLoggedIn] = useState(false); return( // 로그인 된 상태일 경우 { isLoggedIn ? // home 을 보여주고, // 로그인 상태..