728x90 Research/React40 React_redirect 하기 특정 페이지에 유저가 진입했을 때 조건에 따라 다른 페이지로 리다이렉트 하는 경우가 있다. 예를 들어 MyPage로 들어가려 하는데 로그인 안된 경우 MyPage가 아니라 로그인 페이지로 리다이렉트 시키는 경우. 이를 위해 react-router-dom의 Navigate 컴포넌트를 쓴다. // pages/Mypage.js import { Navigate } from 'react-router-dom'; const MyPage = () => { const isLoggedIn = false; if (!isLoggedIn) { // Re-direction return ; } return My Page; }; export default MyPage; 조건이 충족되지 않은 경우 컴포넌트에 리다이렉트 할 경로와 re.. 2023. 10. 30. React_NotFound 페이지 만들기 정의되지 않은 페이지에 유저가 접속할 경우 NotFound 페이지를 띄어줍시다. pages 디렉토리에 NotFound 컴포넌트를 우선 만들어준다. // pages/NotFound.js const NotFound = () => { return ( Not Found 404 ); }; export default NotFound; App 컴포넌트에서 그 외 처리되지 않은 모든 경로를 *(wildcard)로 표시할 수 있다. 기획되지 않은 나머지 경로는 다 NotFound 페이지를 렌더링하도록 했다. import { Route, Routes } from 'react-router-dom'; import About from './pages/About'; import Home from './pages/Home'; im.. 2023. 10. 30. React_게시글 목록에서 현재 게시글 스타일 표시하기 게시글 목록이 표시되는 페이지가 있다. 현재 내가 보고있는 게시글은 그 목록에서 그 게시글 제목에 특정 스타일을 부여해서 내가 지금 뭘 보고 있는지 파악하기 쉽게 하고 싶다. 이를 위해 NavLink를 한다. import { NavLink, Outlet } from 'react-router-dom'; const Articles = () => { const activeStyle = { color: 'green', fontSize: 21, }; return ( (isActive ? activeStyle : undefined)} > Article 1 (isActive ? activeStyle : undefined)} > Article 2 (isActive ? activeStyle : undefined)} > .. 2023. 10. 30. React_outlet으로 공통 레이아웃 컴포넌트 만들기 리액트로 블로그를 만든다고 가정하자. 그럼 상단부 헤더, 메뉴와 같이 반복적으로 랜더링해줘야 하는 경우가 있을 것이다. 즉, '공통 레이아웃 컴포넌트'가 필요한데, 이를 위해 Outlet 컴포넌트를 사용하면 된다. import { Outlet } from 'react-router-dom'; const Layout = () => { return ( Header {/* JSX 사이의 children을 보여준다 */} ); }; export default Layout; Layout이라는 컴포넌트 안에 와 엘리먼트를 만들어준다. header에는 우리가 생각하는 헤더 메뉴가 들어갈 자리고, main에는 이 Layout이 속한 JSX 구문의 children이 을 통해 표현된다. 그리고 이 Layout 컴포넌트로 다.. 2023. 10. 30. 이전 1 2 3 4 5 ··· 10 다음 728x90
