우사미 코딩

1. react-router-dom 설치 npm install react-router-dom 2. Router를 사용하는 모든 페이지는 Router태그로 감싸고 Routes 설정하기 path에는 경로를 넣고, 이 경로에 해당하는 페이지를 렌더링 하려면 element로 그 페이지를 설정해줘야함 나는 HeaderPage에서 그 링크를 제공하고 있어서 HeaderPage도 Router안에 넣었음 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { HeaderPage } from "./page/HeaderPage"; import { MainPage } from "./page/MainPage"; import { Si..

Sidebar.js import Link from './Link'; function Sidebar(){ const links = [ {label : 'Main', path:'/'}, {label : 'Signup', path:'/signup'}, ]; const renderedLinks = links.map((link) => { return {link.label} }); return( {renderedLinks} ); } export default Sidebar; Sidebar에서는 activeClassName으로 현재 페이지일때 bold와 줄이 표시되게 하는 스타일링을 props로 받을 수 있도록 추가한다. Link.js import useNavigation from "../hooks/use-navig..

src/component/Sidebar.js 생성 import Link from './Link'; function Sidebar(){ const links = [ {label : 'Main', path:'/'}, {label : 'Signup', path:'/signup'}, ]; const renderedLinks = links.map((link)=>{ return {link.label} }); return( {renderedLinks} ); } export default Sidebar; 그리고 App.js에서 Link태그를 없애고 Sidebar를 추가한다 import MainPage from "./pages/MainPage"; import SignupPage from "./pages/SignupPag..

import { useNavigation } from "react-router-dom"; function Route({path, children}){ const {currentPath } = useNavigation(); if(path === currentPath){ return children; } return null; } export default Route; custom navigation hook을 만드는 목적 : 다른 엔지니어들이 네비게이션을 쉽게 사용할 수 있도록 함. 약간의 타이핑을 줄여준당 src/hooks/use-navigation.js import NavigationContext from "../context/navigation"; import { useContext } from "r..

우선 쓰앵님의 최애 다이아그램을 먼저 보겠습니당 이것이 무엇이냐 App.js는 Route라는 컴포넌트를 여러개 갖고 Route 컴포넌트는 속성으로 path, children을 가지고 있다 그럼 이전에 만들었던 NavigationContext에서 currentPath를 불러와서 Route컴포넌트의 path와 일치하면 children(SignupPage.js등의 페이지 컴포넌트)를 보여주면 되겠습니다 src/component/Route.js를 생성했고 내용은 다음과 같습니다 import { useContext } from "react"; import NavigationContext from "../context/navigation"; function Route({path, children}){ const {..

리액트 뿐만 아니라 모든 웹페이지 환경에서 테스트 가능함 1. 관리자도구에서 속도 변경 관리자도구 -> Network -> No throttling에서 slow 3G로 변경하면 정말정말 느림 ㅋ 근데 이거 테스트 끝날때마다 초기화하기 귀찮으니 타이머 설정하는걸 춫너함 2. 타이머 설정 (setTimeOut) import { createAsyncThunk } from "@reduxjs/toolkit"; import axios from 'axios'; const fetchUsers = createAsyncThunk('users/fetch', async()=>{ const response = await axios.get('http://localhost:3005/users'); await pause(1000);..

textInput의 name value를 포함하는 car.name이 있으면 bold 처리해주기 useSelecter에서 cars와 name을 같이 반환하도록 한다 (10행) import {useSelector, useDispatch} from 'react-redux'; import { removeCar } from '../store'; function CarList(){ const dispath = useDispatch(); const {cars, name} = useSelector(({form, cars : {data, searchTerm}})=>{ const filteredCars = data.filter((car)=> car.name.toLowerCase().includes(searchTerm.to..

현재 사용하고 있는 라이브러리 - react-redux, immer, @reduxjs/toolkit add car form에 데이터를 입력하고 submit하면 carList에 추가하고 form의 textinput을 비워주고 싶다면? formSlice.fs에서 extraReducers로 carsSlice.jfs의 addCar와 연결해주면 된다 addCar가 호출한다면 폼을 비워주라는거임 import {createSlice} from '@reduxjs/toolkit'; import { addCar } from './carsSlice'; const formSlice = createSlice({ name:'form', initialState:{ name:'', cost:0 }, reducers:{ changeN..