[리액트] 현재 페이지 헤더 색상 변경하기 - useLocation()

메인 페이지에서 캡쳐한 이미지이다.

 

위 사진처럼 웹 사이트에서는 메인 페이지면 메인 페이지에 색상이 들어오고, 테마찾기를 클릭하면 테마찾기에 불이 들어온다. 만약 App 하나에서 작업했다면 클릭 이벤트로 처리할 수 있겠지만, 보통은 여러 컴포넌트 파일이 있고, 그걸 App에서 합치는 방식으로 작업할 것이다.

 

나의 경우 location을 사용했다.

<Link to='/'><li className={`${location.pathname === '/' ? 'active' : null}`}>Home</li></Link>

 

삼항연산자를 사용해 경로가 지정한 문자열과 일치할 시 active라는 클래스를 갖게 하고, 아닐 시 null을 출력했다.

아래는 전체 코드다.

 

 

아래 코드를 실행한 이미지

 

import './App.css';
import { BrowserRouter as Router, Routes, Route, Link, Outlet, useParams } from "react-router-dom"
import { useLocation  } from 'react-router-dom'

function App() {
    return(
        <Router>
            <Routes>
                <Route path='/' element={<Home />}>
                    <Route path='music' element={<Music />} />
                    <Route path='movie' element={<Movie />} />
                    <Route path='contact' element={<Contact />} />
                </Route>
            </Routes>
        </Router>
    )
}

function Home() {
    const location = useLocation()
    return (
        <>
            <h1>현재 페이지 헤더 색상 변경하기</h1>
            <ul>
                <Link to='/'><li className={`${location.pathname === '/' ? 'active' : null}`}>Home</li></Link>
                <Link to='/music'><li className={`${location.pathname === '/music' ? 'active' : null}`}>Music</li></Link>
                <Link to='/movie'><li className={`${location.pathname === '/movie' ? 'active' : null}`}>Movie</li></Link>
                <Link to='/contact'><li className={`${location.pathname === '/contact' ? 'active' : null}`}>Contact</li></Link>
            </ul>
            <Outlet />
        </>
    )
}
function Music() {
    return <h4>Music</h4>
}
function Movie() {
    return <h4>Movie</h4>
}
function Contact() {
    return <h4>Contact</h4>
}

export default App;

 

location이란?

• URL 정보를 문자열로 가져오는 객체

// 자바스크립트에서 사용하기
document.location.인스턴스

//리액트에서 사용하기
const location = useLocation();
location.인스턴스

 

location의 인스턴스 속성

예시 주소 : https://developer.mozilla.org/en-US/docs/Web/API/Location

 

location.href

→ https://developer.mozilla.org/en-US/docs/Web/API/Location

전체 주소가 모두 보인다.

 

location.host

→ developer.mozilla.org

호스트네임만이 표시된다.

호스트란?

네트워크와 컴퓨터를 연결하는 장치로, 호스트 네임은 이 장치의 고유한 이름을 뜻한다. 집을 찾아가기 위한 도로명 주소로 생각하면 쉽다.

 

location.pathname

→ /en-US/docs/Web/API/Location

‘/’ 앞에 있는 URL을 반환한다. 경로가 없을 시 비어있다.

 

 

 

 

 

참조

https://ko.wikipedia.org/wiki/%ED%98%B8%EC%8A%A4%ED%8A%B8_(%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC) 

https://developer.mozilla.org/en-US/docs/Web/API/Location