개발실69 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. 19.1 리액트 라우터가 있는 SPA 다중 페이지 구축하기: 경로 정의 및 사용하기(feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. Route 컴포넌트 특정 경로를 정의한 다음 URL에서 경로가 황성화될 때 로드되어야 하는 리액트 컴포넌트를 정의하는 컴포넌트 Route 가져오기 react-router-dom 에서 Route 컴포넌트를 가져온다. import { Route } from "react-router-dom"; Route 설정하기 src에서.. 2022. 6. 14. 19. 리액트 라우터가 있는 SPA 다중 페이지 구축하기: 리액트 라우터 설치(feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. React Router 설치하기 터미널에서 아래의 코드를 입력하면 패키지가 설치가 된다. @5는 5버전을 설치하는걸 뜻한다. ( 220614 기준 최신버전은 @6) npm install react-router-dom@5 설치가 끝나고 pacage.json 을 확인해보자 "name": "react-complete-gui.. 2022. 6. 14. 이전 1 ··· 3 4 5 6 7 8 9 ··· 18 다음