본문 바로가기
반응형

react11

[React] Route v6를 사용하며 리덕스에서 history사용하기 나만의 라우터를 만들어서 const CustomRouter = ({history, ...props}) => { const [state, setState] = useState({ action: history.action, location: history.location }); useLayoutEffect(() => history.listen(setState), [history]); return ( ); }; 이런식으로 넣어서 사용해준다. store에 이런식으로 넣어주고 reducer: { router: connectRouter(history), 따로 히스토리를 컴포넌트를 만들어주고 import { createBrowserHistory } from 'history' import React, {useLayou.. 2021. 12. 4.
[React] history 사용하기 //store.js import { configureStore } from "@reduxjs/toolkit"; import { connectRouter, } from "connected-react-router"; import {history} from "./history"; export const store = configureStore({ reducer: { router: connectRouter(history), }, }); //history.js import { createBrowserHistory } from 'history' export const history = createBrowserHistory(); 히스토리를 그냥 store에 넣고 돌리면 초기화 하라는 미친듯한 에러가 뜨던가 라우터에서.. 2021. 10. 27.
react-router-dom 사용하기 (Redirect, Switch, NavLink, useHistory) import React from "react"; import {Route, Switch, Redirect} from "react-router-dom" import AllQuotes from "./pages/AllQuotes"; import QuoteDetail from "./pages/QuoteDetail"; import NewQuote from "./pages/NewQuote"; function App() { return ( ); }; export default App; Switch는 자식들 중에 처음으로 조건이 만족하는 하나의 컴포넌트만 출력하게 하기 때문에 정확한 주소로 넘어갈 때에 path뒤에 exact를 붙여주면 됨. Redirect 같은 경우에는 처음에 path = "/"해서 기본 메인을 정할.. 2021. 9. 20.
props, value, map import React from "react"; import ChartBar from "./ChartBar"; import "./Chart.css" const Chart = props => { return ( {props.dataPoints.map((dataPoint) => ( ))} ); }; export default Chart; map을 사용해서 every single data => in to the Chartbar로 나중에 dataPoint를 정의할 때 모든 dataPoint에는 value 값이 있다. 따라서 해당 data요소는 value 값이 있는 개체이다. key값은 id가 있는 경우는 위의 방식과 같이 써도 되지만 없다면 index로 줘도 됨. 2021. 8. 31.
props란? Props란? properties 의 줄임말로써 컴포넌트에게 전달되는 props 는 파라미터를 통하여 조회 할 수 있습니다. props 는 객체 형태로 전달됩니다. import React from 'react'; import Expenses from './components/Expenses/Expenses'; const App = () => { const expenses = [ { id: 'e1', title: 'Toilet Paper', amount: 94.12, date: new Date(2020, 7, 14), }, { id: 'e2', title: 'New TV', amount: 799.49, date: new Date(2021, 2, 12) }, { id: 'e3', title: 'Car Ins.. 2021. 8. 25.

티스토리툴바