시작하는 중

import React, {useState, useEffect} from 'react'; import axios from 'axios'; export default function App() { const [resData, setResData] = useState(null); useEffect(() => { axios.get('어떤 URL').then((res) => setResData(res.data)); }, []); ... 내가 흔하게 짜던 코드이다. 3번째 리액트 프로젝트인데 2번째 프로젝트에서 이렇게 하는게 맘에 안들어서 loader 깔짝이다가 redux랑 같이 어떻게 사용할 수 있을까 하다가 끝나버렸는데 이번에는 좀 다르게 해보려고 한다. ? 뭐가 문제일까 useEffect 훅은 react.d..

찾아보게된 이유 생각해보니까 라우터가 큰 기능은 없을 것 같아서?? 그냥 어떤 상태와 파라메터를 가지고 redux가 필수가 아니니까 context API 같은 것으로 무언가를 하는 건 아닐까? 하는 생각에 시작했다. 사실 예전부터 해보고 싶었는데 오픈소스를 읽을 실력이 안됐음... ㅠㅠ 글의 react-router 깃허브의 소스코드 커밋 헤더는 656ebc3c987de5d56d6ac62beb07e18ef6e68381입니다! 버전 "react-dom": "^18.2.0", "react-router-dom": "^6.10.0", createBrowserRouter의 진행 과정 react-router-dom 6.4부터 생긴 createBrowserRouter로 라우터를 생성한다. 여기에 넘겨지는 것은 Obje..

이 글은 2023년 5월 1일자 커밋인 1ee0014caa7ecf91ac147dca3801820020a4b8a0헤드를 기준으로 작성하였습니다. yarn dev를 하면 vite에서 일어나는 일 자신의 프로젝트에서 yarn dev를 하면 package.json에서 scripts의 "dev"가 실행된다. 우리 프로젝트의 package.json // package.json ... "scripts": { "dev": "vite", "build": "tsc && vite build", ... 그렇다면 vite가 실행된다. 이는 vite의 package.json으로 이동된다. 여기서 "bin"이 우리를 반겨준다. vite의 package.json // vite's package.json ... "bin": { "vi..

오픈 단톡방에서 신기한 것을 봐서 정리하려고 한다. 바로.. useState에 함수를 넣는 것 https://github.com/vinitus/useStateHook/blob/master/src/App.tsx GitHub - vinitus/useStateHook: useState 훅 깊게 파보기 useState 훅 깊게 파보기. Contribute to vinitus/useStateHook development by creating an account on GitHub. github.com 내가 만든 예시이다. 중요한 부분을 살펴보자면 // App.tsx ... function one1(): number { console.log('One1 function is called'); return 1; } fu..