전체 글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. 18.2 리덕스에 뛰어들기: 리덕스 툴킷, (feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. Redux Tookit 리덕스 툴킷 패키지를 설치하기 전에 기존의 리덕스 패키지는 삭제후 설치하면된다. 리덕스 툴킷에 포함되어 있기 때문에 리덕스 패키지만 삭제 후 리덕스 툴킷을 설치하면 된다. npm install @reduxjs/toolkit store 기존에 저장소를 redux에서 createStore로 생성하였.. 2022. 6. 13. 이전 1 2 3 4 5 6 7 8 ··· 14 다음