ijooha 님의 블로그

invalidateQuery와 refetchQueries 차이점 및 queryClient 메소드        쿼리 클라이언트 메소드 메소드설명queryClient.getQueryData('key')캐싱된 데이터를 가져옴 (API 요청 없음)queryClient.setQueryData('key', data)캐싱된 데이터를 즉시 업데이트queryClient.invalidateQueries('key')다음 패치 시 새로운 데이터로 업데이트queryClient.refetchQueries('key')즉시 새로운 데이터를 불러옴queryClient.removeQueries('key')해당 캐시를 삭제queryClient.fetchQuery('key', fetchFn)새로운 데이터를 API 요청 후 가져옴      ..

axios 알아보기        axios란? axios는 기존의 fetch와 같은 역할을 하지만, get, put, post, delete, patch 등의 메소드를 활용하여 API의 데이터를 보다 쉽게 변경/삭제할 수 있도록 한다.가장 큰 차이점은 fetch는 기본적으로 JSON 변환 과정이 필요하지만, axios는 자동으로 변환해준다!!!!          사용법 01 설치npm install axios  02 사용하기import axios from 'axios';const fetchData = async () => { try { const response = await axios.get('https://api.example.com/data'); console.log(response.d..

tanstack 알아보기         tanstack이란? tanstack은 캐쉬 저장소로, 기존에 API를 가져올 때 쓰던 fetch, useEffect의 기능을 한 번에 수행하는 역할을 한다.여러 가지 메소드로 캐쉬를 변경, 삭제할 수 있고, API도 변경, 삭제, 데이터를 불러올 수 있다.         사용법 01 설치npm install @tanstack/react-query  02 Provider상위 컴포넌트에 가서 아래와 같이 프로바이더로 감싸주기import "./index.css";import App from "./App.jsx";const queryClient = new QueryClient();createRoot(document.getElementById("root")).render(..

zustand 알아보기        zustand란? zustand는 상태를 관리하는 방법 중 하나로, useState, Context API, RTK와 같은 역할을 하는데 훠어어어얼씬 간편하다. 정말 훨씬.         사용법 01 설치하기npm install zustand  02 세팅하기먼저 useStore.js 파일을 만들어준다. (useUserStore 등 원하는 네이밍을 붙여 사용)그리고 안에 코드를 작성하는데, RTK의 initialState, reducer, action을 한꺼번에 한 함수에 써준다.import { create } from 'zustand';const useStore = create((set) => ({ count: 0, // 상태 초기값 increase: () => s..

페이지 링킹하기        URL Search Params() `URLSearchParams()`는 기본 내장 함수로, 몇 가지 메소드를 사용하여 URL을 컨트롤할 수 있다.  사용법 .get(파라미터)특정 파라미터 값을 가져온다.new URLSearchParams("popup=open").get("popup") //open//응용하기const params = new URLSearchParams(window.location.search); //현재 와있는 주소, "....id=juha"console.log(params.get("id")); // 'id' 파라미터의 값, "juha"를 가져옴 .set(파라미터, 값)특정 파라미터 값을 설정한다.const params = new URLSearchParams..

useContext 알아보기         useContext란? useState는 데이터를 최상단 컴포넌트에서 생성한 후 props로 자식 컴포넌트에 계속 전달해야 한다.이를 props drilling이라고 한다. 이를 해결하기 위해 등장한 것이 useContext다.전역 상태 관리 도구는 아니지만, 특정 상태를 전역처럼 쉽게 공유할 수 있도록 도와준다. createContext, useReducer, Provider 등을 활용해1. context 폴더에서 상태를 관리하고2. 필요한 컴포넌트에서 useContext를 통해 가져다 쓰면 된다.           context.js 크게 다섯 가지 단계로 나뉜다.액션 정의초기값 생성reducer 함수createContextProvider  01 액션 정의액..

useRef 알아보기         useRef란? state와 마찬가지로 특정 값을 저장하지만, state와 다르게 값이 변경되어도 컴포넌트가 다시 렌더링되지 않는다. 즉, 렌더링과 관계없이 내부에서 값을 계속해서 유지하는 역할을 한다.          코드 형태 const ref = useRef(초기값); // { current: 값 } 형태          사용 예시 01 기본 예시import { useRef } from 'react';function Counter() { const countRef = useRef(0); const increase = () => { countRef.current += 1; console.log(countRef.current); }; return ..

Styled Components 알아보기          Styled Components란? JavaScript 파일 내에서 CSS를 작성할 수 있도록 도와주는 라이브러리다.컴포넌트 단위로 스타일을 관리할 수 있어서 유지보수가 쉽고 가독성이 좋다.          세팅하기 01 패키지먼저, 사용하고자 하는 프로젝트 터미널에서 패키지를 설치한다.yarn add styled-components   02 확장 프로그램 추가왼쪽 블럭처럼 생긴.. 확장프로그램 설치하는 곳으로 가서'VScode-styled-components'를 검색한 후 설치한다.          사용하기 01 Importimport styled from 'styled-components';사용할 컴포넌트의 상단 부분에서 styled-compo..

useState로 부모 자식 컴포넌트 상속 알아보기  우선 html을 보면 자식 부모 요소들이 있다.그와 마찬가지로 컴포넌트도 부모 자식, 형제 관계들이 있는데파일을 따로 만들어 관리하고 (리액트 장점, 유지 보수가 용이)그 파일들을 부모 자식 간 연결을 시켜주면 된다.(형제끼리 연결하고 싶다면, 부모에게 거쳐서 다른 형제로 이동)         예시 먼저Mom이라는 부모 컴포넌트와Child라는 자식 컴포넌트,Sister라는 형제 컴포넌트가 있다고 가정해보자.** 컴포넌트를 쓸 때는 항상 첫 글자가 대문자다. 파일명도 마찬가지 Mom.jsxfunction Mom() { const sendToChild = 'from mom, to child' //html return ( ..

Hook 알아보기추가로 보면 좋을 링크        Hook? Hook을 사용하면 컴포넌트에서 더 많은 react 기능을 사용할 수 있다.react hook은 정말 다양한데, 가장 중요하고 많이 사용하는 두가지 (state hook, effect hook)을 알아보겠다.         State Hook 전 게시글에서 얘기한 바 있는 그 state가 맞다.State를 통해 컴포넌트는 사용자의 입력과 같은 정보를 기억할 수 있다.전 게시글에서 소개한 사이트의 경우 나라명과 메달 개수를 기억하도록 했다.const ['상태 값', '상태를 변화시키는 함수'] = useState('초기값')상태를 변화시키는 함수를 통해 변하는 값을 계속 저장하고, 상태값으로 이를 렌더 등으로 사용한다.         Effec..