Giter Club home page Giter Club logo

fe-react-router's Introduction

[FE] React Router

이번 세션에서는 React Router와 Link, useNavigate, useParams에 대해 다루었습니다.

따라서 이번 실습과 과제는 이를 활용해보는 문제들로, 실습 문제 5개로 이루어져 있습니다!

기존의 실습 과제에서 사용된 개념들도 녹아있으니, 이전 개념들도 다시 복기하면서 해결해나가시면 좋을 것 같습니다!


[실습 1번]

모든 페이지들에서 나타나는 Header 컴포넌트를 만들어주세요!
Header 컴포넌트의 기능은 다음과 같습니다!
(Hint : useNavigate를 활용해 보세요!)

  1. 뒤로 가기 버튼 : 이전 페이지로 이동!
  2. 메인으로 가기 버튼 : Main Page("/")로 이동!

src/components/Header.jsx 와 App.js 에서 진행해주시면 됩니다!

스크린샷 2024-05-13 시간: 15 42 50


[실습 2번]

Link를 활용하여 Main Page에서 Menu Page로 이동할 수 있도록 해주세요!


src/pages/Main.jsx 와 App.js 에서 진행해주시면 됩니다!

스크린샷 2024-05-13 시간: 15 03 55


[실습 3번]

실습 3번 문제와 실습 4번 문제는 직접적인 연관이 있는 문제입니다.

Menu Page에서 브랜드 명을 입력 받아 해당 Product 페이지로 이동할 수 있는 버튼을 만들어주세요!
이동할 수 있는 브랜드는 5가지입니다.

  1. 맘스터치
  2. 맥도날드
  3. 롯데리아
  4. KFC
  5. 버거킹

src/pages/Menu.jsx, src/pages/Product.jsx, App.js 에서 진행해주시면 됩니다!

스크린샷 2024-05-13 시간: 15 03 37


[실습 4번]

Menu Page에서 브랜드 명을 입력받아 해당 내용으로 Product Page로 이동했습니다.
data라는 이름으로 된 객체 배열이 존재하는데요!

Menu Page에서 입력한 브랜드 명이 data 객체 배열에 존재하는 key 값이라면, 해당 브랜드 명, 제품 명, 가격을 그림과 같이 나타내주세요!

만약, 이외의 브랜드를 입력받았다면 다음과 같이 "해당 브랜드의 제품을 찾을 수 없습니다." 라고 표시해주세요!


src/pages/Menu.jsx, src/pages/Product.jsx, App.js 에서 진행해주시면 됩니다!

  • 올바른 브랜드를 입력했을 때 스크린샷 2024-05-13 시간: 15 03 43

  • 부적절한 브랜드를 입력했을 때 스크린샷 2024-05-13 시간: 15 49 02

[실습 5번]

1~4번 문제에서 정의되지 않은 경로로 접근하려는 경우는 없어야겠죠??
비정상적인 경로로 접근하는 경우에는 다음과 같이 "존재하지 않는 페이지 입니다." 라고 표시해주세요!


src/pages/NotFound.jsx, App.js 에서 진행해주시면 됩니다!

스크린샷 2024-05-13 시간: 15 07 52

fe-react-router's People

Contributors

returntooz avatar thinkmuk avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.