반응형 React22 [Next.js] Next.js 란? 🎈 Next.js란? Next.js는 React의 SSR(Server-Side-Rendering)을 구현할 수 있게 도와주는 프레임워크로서 여전히 React를 기반으로 하기 때문에 React를 향상시키고 여전히 React코드를 사용한다. Next.js는 페이지의 검색엔진을 위해서 타이틀이나 meta정보를 손쉽게 설정할 수 있는 장점과 렌더링이 빠르다는 장점을 가지고 있다. React자체에서도 SSR을 설계할 수 있지만 Next.js를 사용하면 보다 쉽게 구현이 가능하다. Next는 한번에 렌더링이 되기 때문에 처음 로딩속도는 빠르지만 page 이동시에는 CSR(Client Side Rendering)이 더 빠르다. 기 이유는 CSR은 처음 로딩할 때 모든 파일을 내려받아 페이지를 이동할 때 해당페이지에서.. 2021. 12. 22. [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] Router v6 모든 요소를 로 업그레이드 Switch가 사라지고 대신에 Routes가 생김. useHistory대신에 useNavigate가 생김. 모두 대체 가능함. History.push("/")대신 그냥 navigate("/")써주면 됨. navigate(-1) = history.goback(); navigate(-2) = history.go(-2); useRouteMatch가 사라짐 대신에 상대 경로를 쓸 수 있게 함. 2021. 11. 10. [SCSS]Failed to compile 오류 해결법 깔아준 Node Sass 버전문제로 yarn remove node-sass yarn add node-sass@5.0.0 npm uninstall node-sass npm install node-sass@5.0.0 내려주면 에러가 발생하지 않는다. 2021. 10. 26. [React] 지연 로딩(Lazy Loading) import React, {Suspense} from "react"; import { Route, Switch, Redirect } from 'react-router-dom'; import Layout from './components/layout/Layout'; import LoadingSpinner from "./components/UI/LoadingSpinner"; //사전에 실행되지 않고 필요할 경우에만 미리 코드를 다운받음. //다운로드가 완료될 때 까지 해당 component를 load할 수 없기 때문에 //Suspense같이 써야함. const NewQuote = React.lazy(() => import('./pages/NewQuote')); const QuoteDetail = React... 2021. 9. 23. 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. 이전 1 2 3 4 다음
