이야기 정리

위 사진처럼 웹 사이트에서는 메인 페이지면 메인 페이지에 색상이 들어오고, 테마찾기를 클릭하면 테마찾기에 불이 들어온다. 만약 App 하나에서 작업했다면 클릭 이벤트로 처리할 수 있겠지만, 보통은 여러 컴포넌트 파일이 있고, 그걸 App에서 합치는 방식으로 작업할 것이다. 나의 경우 location을 사용했다. Home 삼항연산자를 사용해 경로가 지정한 문자열과 일치할 시 active라는 클래스를 갖게 하고, 아닐 시 null을 출력했다. 아래는 전체 코드다. import './App.css'; import { BrowserRouter as Router, Routes, Route, Link, Outlet, useParams } from "react-router-dom" import { useLocatio..

이번에는 useNavigate의 사용법과, 이를 이용해 값을 가져오는 방법, 그리고 리액트에서 페이지 뒤로가기 버튼을 만드는 간단한 방법에 대해 설명할 것이다. useNavigate란? 조건을 만족했을 시(로그인, 양식 제출 등), 혹은 특정 이벤트 발생 시 url을 조작할 수 있는 Hook 특정 조건을 달 수 있다는 점에서 Link와 차이점이 있다. Link는 a태그라고 생각하면 편하다. react v6부터 useHistory의 대체제로 등장했다. useHistory에서 사용했던 기능을 useNavigate에서도 사용할 수 있는 것이다. 기본 사용법 react router dom을 설치한 후 다음과 같이 코드를 작성한다. 설치 코드 : npm install react-router-dom import {..