오열매의 코딩 공간

* 설치 yarn add react-beautiful-dnd yarn add @types/react-beautiful-dnd * 세팅 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; // test array const toDos = ["a", "b", "c", "d", "e", "f", "g"]; function App() { // drag가 끝났을 때 실행할 함수 const onDragEnd = () => {}; return ( // DragDropContext ~ onDragEnd 필수 {/* Droppable ~ droppableId 필수 */} {/* Droppable에는 제공되는 props 존재-> chil..

1. Outlet Outlet은 정의한 Router에서 특정 path에 해당하는 경로에 children이 있을 때, 해당 컴포넌트를 렌더링하도록 해주는 컴포넌트이다. 반드시 부모 컴포넌트 내에서 정의해줘야 한다. 그래야 해당 컴포넌트의 자식 컴포넌트와 연결이 가능하기 때문이다. * Router.tsx (일부) { path: "/users/:userId", element: , children: [ { path: "followers", element: , }, ], }, # 앞에 "/" 를 붙이면 절대경로(맨 처음부터 시작), 붙이지 않으면 부모 path에서부터 시작하는 상대경로이다. * User.tsx (일부 ... Followers 컴포넌트의 부모 컴포넌트) See Followers! Link 컴포넌트를..

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)에 를 추가해줘야 함