Study46 19.5 리액트 라우터가 있는 SPA 다중 페이지 구축하기: 경로 구성에 Switch 및 exact 사용하기(feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. Switch 및 exact 사용하기 아래의 Route 경로 설정을 보면 path의 경로가 products 가 2개이며 하나는 params의 키로 productId 를 가지고 있다. import { Route } from "react-router-dom"; import Welcome from "./pages/Welcom.. 2022. 6. 14. 19.4 리액트 라우터가 있는 SPA 다중 페이지 구축하기: Params 사용하여 동적 경로 추가하기(feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. useParams로 동적 매개변수 추출 params 를 사용하기전 app에서 선 작업을 해준다. App.js 에서 Route 를 설정한 라인 중 어느 한 코드를 확인 해보자. path 에서 콜론을 사용하고 params 의 개채의 키로 식별자를 넣어준다. 식별자는 productId 이제 useParams를 사용할 준비가.. 2022. 6. 14. 19.3 리액트 라우터가 있는 SPA 다중 페이지 구축하기: NavLink 사용하기(feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. NavLink NavLink는 기존의 Link 컴포넌트에서 css기능을 추가할 수 있는 Link 라고 볼 수 있다. NavLink 사용하기 Link를 NavLink 로 대체하여 사용하면 된다. CSS 추가는 activeClassName prop으로 사용할 수있다. import { NavLink } from "react.. 2022. 6. 14. 19.2 리액트 라우터가 있는 SPA 다중 페이지 구축하기: Link 작업하기(feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. Link MPA 에서 링크 작업을 할때는 a태그를 활용하였는데 리액트에서도 a태그를 활용하면 SPA로 만들 수 없다. 대신 Link 컴포넌트를 react-router-dom 에서 가져와 a태그 대신 사용하면 상태를 유지한채로 사용이 가능하여 원하는대로 SPA를 만들 수 있다. Link 사용하기 a 태그가 들어갈 곳을 .. 2022. 6. 14. 이전 1 2 3 4 ··· 12 다음
