우사미 코딩

1. react-router-dom 설치 npm install react-router-dom 2. Router를 사용하는 모든 페이지는 Router태그로 감싸고 Routes 설정하기 path에는 경로를 넣고, 이 경로에 해당하는 페이지를 렌더링 하려면 element로 그 페이지를 설정해줘야함 나는 HeaderPage에서 그 링크를 제공하고 있어서 HeaderPage도 Router안에 넣었음 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { HeaderPage } from "./page/HeaderPage"; import { MainPage } from "./page/MainPage"; import { Si..

Sidebar.js import Link from './Link'; function Sidebar(){ const links = [ {label : 'Main', path:'/'}, {label : 'Signup', path:'/signup'}, ]; const renderedLinks = links.map((link) => { return {link.label} }); return( {renderedLinks} ); } export default Sidebar; Sidebar에서는 activeClassName으로 현재 페이지일때 bold와 줄이 표시되게 하는 스타일링을 props로 받을 수 있도록 추가한다. Link.js import useNavigation from "../hooks/use-navig..

src/component/Sidebar.js 생성 import Link from './Link'; function Sidebar(){ const links = [ {label : 'Main', path:'/'}, {label : 'Signup', path:'/signup'}, ]; const renderedLinks = links.map((link)=>{ return {link.label} }); return( {renderedLinks} ); } export default Sidebar; 그리고 App.js에서 Link태그를 없애고 Sidebar를 추가한다 import MainPage from "./pages/MainPage"; import SignupPage from "./pages/SignupPag..

import { useNavigation } from "react-router-dom"; function Route({path, children}){ const {currentPath } = useNavigation(); if(path === currentPath){ return children; } return null; } export default Route; custom navigation hook을 만드는 목적 : 다른 엔지니어들이 네비게이션을 쉽게 사용할 수 있도록 함. 약간의 타이핑을 줄여준당 src/hooks/use-navigation.js import NavigationContext from "../context/navigation"; import { useContext } from "r..

우선 쓰앵님의 최애 다이아그램을 먼저 보겠습니당 이것이 무엇이냐 App.js는 Route라는 컴포넌트를 여러개 갖고 Route 컴포넌트는 속성으로 path, children을 가지고 있다 그럼 이전에 만들었던 NavigationContext에서 currentPath를 불러와서 Route컴포넌트의 path와 일치하면 children(SignupPage.js등의 페이지 컴포넌트)를 보여주면 되겠습니다 src/component/Route.js를 생성했고 내용은 다음과 같습니다 import { useContext } from "react"; import NavigationContext from "../context/navigation"; function Route({path, children}){ const {..

지금은 tailwind css 라이브러리를 사용중이라 a태그의 기본 스타일링이 전혀 없는 상태임 (마우스 커서, 텍스트 컬러, 밑줄 모두 없음) 그래서 마우스 커서도 변경해주고 현재 페이지는 밑줄도 쳐서 보여줄거임 (+ classname이라는 라이브러리도 사용하고 있음) before import { useContext } from "react"; import NavigationContext from "../context/navigation"; import classNames from "classnames"; function Link({ to, children }){ const {navigate} = useContext(NavigationContext); const classes = classNames('..

ctrl 키를 누르고 클릭하면 새 탭에서 브라우저가 열려야하는데 우리의 Link 컴포넌트는 아직 그 기능이 없음 이걸 만들거임 기존 코드는 이러하다 import { useContext } from "react"; import NavigationContext from "../context/navigation"; function Link({ to, children }){ const {navigate} = useContext(NavigationContext); const handleClick = (event) => { event.preventDefault(); navigate(to); } return {children} } export default Link; 변경된 코드는 다음과 같다 import { use..

페이지 url을 입력했는데 리엑트에서는 url에 따른 페이지 렌더링을 어떻게 해야하지? 할때 navigation을 사용하면 됨 여기에서는 window.history.pushState로 페이지를 이동하는것처럼 보이게 할거임 이렇게 했을 때 장점이 뭐냐면 페이지가 refresh 되지 않는 것이다 그럼 main->signup페이지로 이동한다고 했을 때 main에서 선언했던 변수들이 signup페이지에서도 사용이 가능한 것임 이를 위해 navigation을 만들 것이당 네비게이션을 지원하는 라이브러리도 많다고 하지만 강사쓰앵님이 알려주신대로 한번 해봄 window.history.pushState({}, '', '/accordion') 한다음 이벤트 추가하면 기존에 어느 페이지에 있었는지 보여짐 window.ad..