React
-
전역상태관리 Recoil (feat.ContextAPI) 아티클React/Recoil 2023. 5. 2. 21:05
0. 본격적인 Recoil 소개에 앞서 Recoil, ContextAPI 같은 전역상태관리 툴을 왜 사용하는 걸까? 프론트엔드에서 상태(State)란 컴포넌트 내부에서 관리되며 웹앱의 렌더링에 영향을 미치는 객체이다. 처음 리액트 앱을 npm에서 실행하면 couter가 시작되는데 여기서 + 를 누르면 증가하고 -를 누르면 감소하는 그 "숫자" 가 바로 상태의 형태로 관리된다는 말이다. 상태의 종류에는 총 3가지로 나눌 수 있는데 지역상태 : 하나의 컴포넌트 내부에서만 관리되는 상태로 , 해당 상태를 다른 컴포넌트들과 공유하지 않는다. 컴포넌트 간 상태 : 하나의 상태를 여러가지 컴포넌트에서 사용되고 변경되며 관리되는 모습을 보여준다. 이러한 상호작용을 위해 바로 "Prop Drilling" 의 방식을 사..
-
useState 바로 뒤에 console.log 를 했더니 이전 값이 나온다.(혹은 비어있다)React/React 2023. 3. 7. 17:12
📌 useState 바로 뒤에 console.log 를 했더니 이전 값이 나온다.(혹은 비어있다) 라는 문제가 생겼다. 코드를 먼저보자 import { useEffect, useState } from "react"; function Todolist() { const [todo, setTodo] = useState(""); const todoHandler = (e: React.FormEvent) => { e.preventDefault(); const todoData = new FormData(e.currentTarget); const newTodo = todoData.get("todo") as string; setTodo(newTodo); console.log(todo) //비어있는 값이 출력된다. e.c..
-
Recoil 로 Global state management 글로벌 상태관리를 해보자!React/Recoil 2023. 3. 6. 18:44
🌈 다크모드와 라이트모드 전환을 위한 state 설정을 위해 recoil을 이용해보자 📌 recoil 설치방법 npm install recoil 📌 atoms.ts import { atom } from "recoil"; export const isDarkAtom = atom({ key: "isDark", default: false, }); 📌 App.tsx useRecoilValue(isDarkAtom) 을 통해 초기값인 false 를 가져올 수 있다. import { isDarkAtom } from "./recoil/atoms"; import {useRecoilValue} from "recoil" ...(중략) function App() { const isDark = useRecoilValue(isDa..
-
React Query 리액트 쿼리 사용법 사용하는 이유React/React Query 2023. 2. 28. 19:46
📌 기존의 코드는 다음과 같다. loading 이라는 값을 통해 데이터가 다 불러와졌는지를 판별한다. 그리고 데이터가 다 불러와졌다면 loading 을 false 값으로 전환하고 데이터를 setCoins 를 통해 coins 에 데이터를 담는다. 이러한 과정은 두개의 useState를 사용하게 만드는 단점이 존재한다. const [coins, setCoins] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { axios .get("https://api.coinpaprika.com/v1/tickers") .then((Response) => { setCoins(Response.data.slice(0, 99)); set..
-
React Outlet 적용하기React/React 2023. 2. 26. 01:19
📌 하나의 컴포넌트에서 2개이상의 탭 컴포넌트를 이용하고 싶다. Router.tsx function Router() { return ( // 아래와 같이 중첩 Route 를 이용하면 된다. /:coinId/price 이런식이다. ); } export default Router; 이후 컴포넌트 내부에서 price 혹은 chart 를 이용하고 싶은 layout 위치에 을 추가하면 된다. 참고자료를 보면 조금 더 쉽게 이해할 수 있다. https://velog.io/@chldmswnl/React-router-Outlet-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8..
-
React 기본 css 제거하기React/React 2023. 2. 25. 16:16
📌 React 에서 html 을 작성할때 기본적으로 적용되어 있는 css 를 모두 제거 하고 싶다. 방법은 2가지 1.reset .css 를 App.jsx 에 추가한다. reset.css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, ..
-
React useParams() 사용법React/React 2023. 2. 23. 20:41
📌 Router.tsx import { BrowserRouter, Routes , Route} from "react-router-dom"; import Coin from "./routes/coin"; import Coins from "./routes/coins"; function Router() { return ( // :coinId 는 const { coinId } = useParams() 를 통해 가져올 수 있다. // coin.tsx file 참고 ); } export default Router; 📌 coin.tsx file import { useParams } from "react-router-dom" function Coin () { const {coinId}= useParams() consol..
-
React Router 버전 5 , 6 문제 해결 및 차이점 (react-router-dom)React/React 2023. 2. 23. 20:36
1. 설치하는법 //설치 $ npm install router-react-dom // 삭제 $ npm uninstall router-react-dom // 재설치 $ npm install router-react-dom@5 2. package.json 파일의 dependencies 부분의 react-router-dom 부분의 버전을 아래와 같이 변경한 후 터미널에 npm i를 통해 재설치 하는 방법도 있다. // before "dependencies": { ... "react-router-dom": "^6.1.6", ... }, // after "dependencies": { ... "react-router-dom": "^5.3.0", ... }, 📌 3. 5버전과 6버전의 차이 ✔️ 5버전은 Switch..