본문 바로가기

Programing/React72

Supabase 셋업 이후 TanStack Query 커스텀 훅으로 fetch 전역 공유하기 주의Supabase 라이브러리에서 제공하는 내장 함수가 더 좋다.Supabase는 기본적으로 REST API를 지원하기 때문에 아래의 방식이 잘 작동되지만 굳이 Axios Fetch를 보내는 것을 권장하진 않는다.준비물Supabase Project URLAnon-key(Public)라이브러리: axios, TanStack Query파일 트리node_modulespublicsrc assets components api axiosInstance.js hooks usePlaces.js App.jsx main.jsxindex.htmlpackage.json.env.gitignore...파일트리는 위 내용이 전부가 아니고, 기본 파일은 똑같다. 아래 두 개의 파일은 새로 생성.. Programing/React 2024. 6. 17.
과거순, 최신순 (데이터 정순, 역순) 정렬 버튼 만들기 상황api로 받아 온 데이터가 id별이나 작성순서대로, 순서대로 작성이 되어 있다고 가정했을 때1번 row는 가장 오래된 데이터일 것이다. 따라서 이 데이터를  map 메서드 등을 통해 렌더링 하면 화면에는 과거 순으로 렌더링 된다. 이것을 렌더링 할 때 데이터를 거꾸로 렌더링하고, 이후부터 토글 버튼을 누르면 과거순/최신순으로 바뀌면서 렌더링 되도록 구현 해보고자 한다.방법상태 만들기import { useState } from 'react';function SponsorList() { const [isAsc, setIsAsc] = useState(false); ...상태의 초기값을 true로 주면 아래 이어지는 로직에서는 데이터가 생성된 순서대로 렌더링 되기 때문에 화면에는 역순으로 보인다.기존.. Programing/React 2024. 6. 17.
배열로 렌더링 된 아이템 리스트 클릭 시 디테일 페이지에 정보 넘기기 상황이런 식으로 데이터를 받아와 렌더링하는 배열이 있다.이것을 클릭했을 때 디테일 페이지로 해당 아이템의 정보만 디테일 페이지로 넘기는 방법에 대해서 간단하게 알아 보겠다. 방식은 여러 가지가 있을 수 있다.리스트가 렌더링 된 페이지에서 해당 아이템의 고유한 값(예를 들어 id 컬럼)을 URL 파라미터로 넘겨서 디테일 페이지에서 다시 fetch를 받은 뒤, 그 fetch 의 응답값을 다시 filter 하여 find 메서드로 id와 일치하는 값을 찾아오는 방법필요한 정보가 리스트 렌더링 페이지에서 아이템에 다 담겨 있으니 그것을 그대로 디테일 페이지로 넘기는 방법데이터가 여러 사람에 의해 실시간으로 변할 가능성이 있다면 1번의 방법이 좋겠고, 그럴 가능성이 적다면 굳이 디테일 페이지에서 한 번 더 fetc.. Programing/React 2024. 6. 17.
TanStack-Query Quick Start TanStack Query 패키지 설치yarn add @tanstack/react-queryGET 요청 (useQuery)fetch 함수 활용// GET 요청할 컴포넌트 또는 최상단 컴포넌트// App.jsximport { useQuery } from '@tanstack/react-query';const apiUrl = '~~~';function App() { const { data, error, isLoading } = useQuery({ queryKey: ['data'], queryFn: async () => { try { const response = await fetch(apiUrl); if (!response.ok) { throw n.. Programing/React 2024. 6. 17.
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.

티스토리툴바