All Day Tired

리액트 상태는 크게 3가지로 구분된다.1. 지역: useState로 관리2. 전역: store로 상태관리3. 서버: API통신할때 필요한 상태 리액트쿼리는 특히 서버상태관리를 하는데 유용한 라이브러리이다.그러면 리액트쿼리를 사용하기위해 기본세팅하는 방법을 알아보자. 1. react query 설치(버전 5로 설치함)npm i @tanstack/react-query 2. index.js 또는 main.jsx에서 import 해주고 기본 세팅하기import { createRoot } from 'react-dom/client'import './index.css'import App from './App.jsx'import { QueryClient, QueryClientProvider } from '@tanst..

코딩알려주는 누나 강의를 듣고 쓰는 글입니다. Zutand는 상태관리를 위해 만들어진 라이브러리다.상태관리가 필요한 이유는 이미 간단히 포스팅 해두었다.리액트 redux 상태관리 리액트 redux 상태관리코딩알려주는 누나 강의를 보고 쓰는 글입니다. 리액트를 사용하면서 문제점이 있다.이렇게 부모에서 자식으로만 state가 전달된다는 문제!이렇게 되면 넘겨줘야하는 props가 너무 많아져서 관리yj-dev.tistory.com 근데 확실히 Zustand 쓰는게 편하긴 한듯... Zustand를 사용하는 방법은 아래와 같다.1. Zustand를 설치한다.npm install zustand2. store를 만들자. src > stores > personStore.js 파일을 만들어준다. 3. Store.js에..

코딩알려주는 누나 강의를 보고 쓰는 글입니다. 리액트를 사용하면서 문제점이 있다.이렇게 부모에서 자식으로만 state가 전달된다는 문제!이렇게 되면 넘겨줘야하는 props가 너무 많아져서 관리하기도 힘들어지는데이것을 해결하는 것이 상태관리! store라는 공간에 state들을 넣어주어서 어느 컴포넌트든 사용할 수 있게 해주는 것!이러한 상태관리를 도와주는 것이 바로 redux이다.redux는 라이브러리로 구조는 아래와 같다.Reducer는 단순히 함수로 그 아래에는 if문이나 switch문으로 action의 type들이 나열되어서 각각 하는 기능을 구현한 것이다.Action은 type과 payload로 이루어진 객체로 type은 액션의 이름, payload는 매개변수라고 생각하면 된다. redux를 사용..

코딩알려주는 누나 강의 듣고 정리한 글입니다. state가 변하면 UI를 바꾼다state 형태는 아래와 같다.const [변수, setState] = useState(초기값);state값을 변경하기 위해서는 setState 함수를 통해서 바꿔야한다 state가 바뀌면 UI가 랜더링 됨 그래서 setState 함수를 실행한다고 바로 실행되지 않고 비동기적으로 실행이 됨 setState 함수를 감싼 함수가 끝나야 setState가 실행된다 코드와 함께 설명하면import { useState } from 'react'import './App.css'function App() { const [count, setCount] = useState(0); const increase = () => { setC..

코딩알려주는 누나 강의를 듣고 정리하는 글 입니다. url을 넘길 때 많은 정보를 넘기곤 한다.http://www.yj-dev.com/history 이런식으로 pathVariable로 history라는 정보를 넘기던가http://www.yj-dev.com?id=1&num=23 이런식으로 쿼리파라미터로 id와 num이라는 정보를 넘기던가 먼저 pathVariable을 하려면 history같은 값은 변해야하는 값인데 Router에 어떻게 지정을 해줘야할까?mport { useState } from 'react'import './App.css'import PageA from './page/PageA'import { Routes, Route, Navigate } from 'react-router-dom'//i..

코딩알려주는 누나 강의를 들으면서 정리하는 글 입니다! 보통 웹사이트를 보면 여러 페이지를 이동하면서 사용하게 되는데 이 때 리액트에서 필요한 것이 Router Router를 사용하기 위해서는 가장 먼저 리액트 프로젝트에 Router를 설치하는 것이다.아래 명령어를 터미널에 치면 Router 6버전이 설치 된다.npm install react-router-dom@6 그럼 진짜로 Router를 사용해주기 위해서는 main.jsx 파일에서 BrowserRouter를 사용해주자import { StrictMode } from 'react'import { createRoot } from 'react-dom/client'import './index.css'import App from './App.jsx'impor..

리액트 첨 해보는데 진심 개빡침난 이걸 왜 쓰는지 모르겠다... swiper 쓰는데도 구글링으로 나온 글 다 하라는대로 했는데몽땅 다 안돼서 개빡쳤음 진심 레알...이걸로 2시간 삽질함 거지같아 일단 나는 swiper 9.3.2 버전을 사용했다. 1. npm으로 swiper 다운로드 하기나는 인텔리제이를 사용하고 있어서 인텔리제이 터미널에 가서npm install swiper@9.3.2명령어로 swiper 9.3.2 버전을 다운로드 했다.확인하려면 리액트 다운 받은 디렉토리에 package.json을 보면 swiper 몇버전을 받았는지 알 수 있고node_modules에 swiper 디렉토리가 있는 것을 확인할 수 있다. 2. 필요한 기능들 import 하기나는 아래와 같이 import 했다.import..