오열매의 코딩 공간

URL에 있는 정보를 가져와 string으로 리턴한다. 1) Router.tsx (일부 / createBrowserRouter 이용) { path: "/users/:userId", element: , }, # /users 에는 유저가 볼 수 있는 정보가 없으므로 바로 할당 2) Home.tsx (일부 / 위 코드의 기본 루트가 Home.tsx로 지정되어 있다.) {users.map((user) => ( {user.name} ))} Link에 의해 해당 버튼을 누르면 user.id가 들어간 url로 이동하게 된다. 3 ) User.tsx (일부) export default function User() { const { userId } = useParams(); return ( {`User with id $..

useNavigate는 사용자가 직접 클릭하지 않아도(Link의 방식으로) 사용자를 다른 곳으로 이동시키고 싶은 경우에 사용한다. import { Link, useNavigate } from "react-router-dom"; export default function Header() { const navigate = useNavigate(); const handleClick = () => { navigate("/about"); }; return ( Home About ); } 위 코드는 About 이라는 버튼을 눌렀을 때, /about으로 사용자를 이동시킨다. useNavigate Hooks를 사용했으며, navigate(" url ") 형식으로 이용한다. (Navigate 와는 다르다! ... Nav..

import { createBrowserRouter, RouterProvider, // Navigate, } from "react-router-dom"; import Home from "./screens/Home"; import About from "./screens/About"; import Root from "./Root"; import NotFound from "./screens/NotFound"; import ErrorComponent from "./components/ErrorComponent"; const router = createBrowserRouter([ { path: "/", element: , children: [ { path: "/", element: , }, { path: "/ab..

(Router.tsx 파일을 따로 분리해서 진행 / App.tsx -> Root.tsx) 1) Router.tsx import { createBrowserRouter, RouterProvider } from "react-router-dom"; import Home from "./screens/Home"; import About from "./screens/About"; import Root from "./Root"; const router = createBrowserRouter([ { path: "/", element: , children: [ { path: "/", element: , }, { path: "/about", element: , }, ], }, ]); export default functi..

용도: context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. 그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어 등이 있습니다. * context 폴더 ~ 기본 파일 (예시 활용, 다크모드 구현하기 ... DarkModeContext.jsx) - 선언 import { createContext, useContext } from "react"; export const DarkModeContext = createContext(); export function DarkModeProvider({ children }) { const [darkMode, setDarkMode] = useState(false); const togg..

Creat React App 을 이용하여 프로젝트를 생성할 때, 다양한 방법이 있다. 크게 4가지로 나누어 살펴본다. (npm+js / npm+ts / yarn+js / yarn ts) 설치 전, node.js와 npm은 설치되어 있어야 한다. * NPM 이용 공통) create react app 설치 ... (프로젝트 생성 전, 최초 1회) npm install -g create-react-app 1) Vanila JS 프로젝트 npx create-react-app 2) TypeScript 프로젝트 npx create-react-app --template typescript * Yarn 이용 공통) ... (프로젝트 생성 전, 최초 1회) 1. yarn 세팅 corepack enable yarn set..

- 설치: npm install react query - api 관련 함수(fetcher 함수) 들은 따로 파일로 분리하는 것이 좋다. ~ api.ts - fetcher함수는 json data의 Promise 를 return 해야 한다. (정확히 json data는 아니지만) - const { 로딩여부, 데이터 } = useQuery(query key, fetcher 함수) ... 로딩중 또는 로딩이 끝나면 react query가 알려준다. ... 로딩이 끝난 데이터를 담아서 주기도 한다. - React query가 데이터를 캐시에 저장해두기 때문에, 로딩하고 화면을 전환한 뒤에 다시 돌아가도 로딩을 하지 않는다. - React query 에 있는 devtools를 import 해오면, 캐시에 있는 qu..

npm i react-router-dom ... React Router Dom: 어플리케이션에 URL을 가질 수 있도록 해준다. // [router.tsx] import { BrowserRouter, Routes, Route } from "react-router-dom"; function Router() { return ( ); } export default Router; * 상위 tsx파일 (index.tsx / app.tsx)에 를 추가해줘야 함

타입스크립트와 styled-components 테마를 연결 1) 설치: npm install @types/styled-components (이미 함) 2) declaration 파일 생성 ... 기본적인 index.d.ts 파일은 있지만, 커스텀 파일을 만들어야 한다. ... src 폴더에 styled.d.ts 파일 생성 및 아래 코드 복붙 // [styled.d.ts] // import original module declarations import 'styled-components'; // and extend them! declare module 'styled-components' { export interface DefaultTheme { borderRadius: string; colors: { m..

npm i styled-components npm i --save-dev @types/styled-components import { createGlobalStyle, ThemeProvider } from "styled-components"; const GlobalStyle = createGlobalStyle` 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, sub, sup, tt, var, b, u,..