React - useLocation

1. react-router-dom이란?

• 리액트 앱에서 네비게이션(페이지 이동)을 구현하기 위해 사용하는 표준 라이브러리
• 리액트는 기본적으로 SPA(Single Page Application) 방식이므로 페이지를 이동할 때마다 서버에서 새 HTML을 불러오지 않는다. 대신 주소창의 경로(URL)를 감지하여 그에 맞는 컴포넌트만 갈아 끼워주는 역할을 이 라이브러리가 수행한다.

2. 대표적인 훅들

자주 사용하는 핵심 훅은 다음과 같다.

• useNavigate: 페이지를 강제로 이동시켜야 할 때 사용한다. (예: 버튼 클릭 시 이동)

• useLocation: 현재 머물고 있는 페이지의 URL 정보와 전달받은 상태(State)를 가져올 때 사용한다.

• useParams: URL 경로에 포함된 파라미터(예: /cafe/:id에서 id 값)를 읽어올 때 사용한다.

  • URL 형태: /cafe/123, /profile/gemini
  • 설정 방식: 라우터 설정 시 <Route path="/cafe/:id" />처럼 :을 붙여 변수명을 정한다.

  // 주소가 /cafe/123 일 때
  const { id } = useParams(); 
  console.log(id); // "123"

• useSearchParams: URL 뒤의 쿼리 스트링(예: ?search=cafe)을 다룰 때 사용한다.

3.. useLogation 사용 예시

• Filter Page : 데이터 보내기
  사용자가 선택한 필터(지역, 문, 태그)를 주머니(state)에 담아 보낸다.

const handleApply = () => {
  // 1. /cafelist 페이지로 이동하면서
  // 2. state라는 객체 안에 우리가 선택한 값들을 실어 보낸다.
  navigate("/cafelist", {
    state: {
      region: regionId,
      door: selectedDoor,
      tags: selectedTags,
    },
  });
};

• CafeListPage : 데이터 받아오기
  이동해온 페이지에서는 useLocation을 통해 그 주머니를 열어본다.

export default function CafeListPage () {
  const location = useLocation();

  // 1. 전달받은 state가 있으면 사용하고, 없으면(직접 접속 등) 기본값을 설정한다.
  const state = (location.state as LocationState) || { 
    region: null, 
    door: null, 
    tags: [] 
  };

  // 2. 구조 분해 할당을 통해 각 필터 값을 변수로 꺼낸다.
  const { region, door, tags } = state;

  return (
    <div>
      {/* 3. 꺼낸 데이터를 화면에 보여준다. */}
      <p>지역: {region}</p> 
      <p>문: {door}</p>  
      <p>태그: {tags.join(", ")}</p> 
    </div>
  );
}

4. 프론트엔드 내부 전달 vs 백엔드 통신

웹 서비스를 만들다 보면 “데이터를 넘긴다”는 말이 두 가지 의미로 쓰인다.
1. 프론트엔드 내부에서 데이터를 넘기는 것
2. 백엔드 서버와 통신해서 데이터를 받아오는 것

1) 프론트엔드 내부 전달 (useNavigate → useLocation)

• 이 과정은 브라우저 안에서만 일어나는 이동이다.

예를 들어
1. 사용자가 지역: 서강대 / 출입문: 정문 / 태그: 콘센트 있음 을 선택하고 “검색”을 누르면, 우리는 useNavigate() 를 이용해서 페이지를 이동시키면서, 이 검색 조건 데이터(state) 를 함께 넘긴다.

navigate("/cafes", {
  state: { region, door, tags }
});

2. 그리고 도착한 페이지(CafeListPage)에서는 useLocation() 으로 그 데이터를 받는다.

const location = useLocation();
const { region, door, tags } = location.state;

• 이 과정은 서버와 아무 상관이 없고, 단순히 “사용자가 고른 조건을 다음 페이지로 전달하는 배달 과정”이다.

즉, useNavigate → useLocation은 “검색 조건을 옆 페이지로 전달하는 내부 메신저” 역할이다.

2) 백엔드 통신 (fetch)

• 이 과정에서부터 진짜 데이터 요청을 한다.

• useLocation으로 받은 region, door, tags는 아직 카페 데이터가 아니고, 검색 조건일 뿐이기 때문에 이 조건을 가지고 서버에 요청을 해야한다.

📍 서버에 “이 조건에 맞는 카페 리스트를 주세요.” 라고 요청을 하는 것이 fetch

📡 백엔드 연동 전체 흐름

① 필터 데이터 준비 (CafeListPage)

const location = useLocation();
const { region, door, tags } = location.state;

② 서버에 요청 보내기 (Request)

• fetch를 이용해 서버에 요청을 보낸다.

🔹 GET 방식 - 주소창에 조건을 붙여서 보내는 방식

/api/cafes?region=sogang&door=정문

React 코드 예시:

fetch(`/api/cafes?region=${region}&door=${door}`)

✔️ 특징:

• URL에 조건이 노출된다
• 단순 조회에 적합
• REST API에서 가장 많이 사용

🔹 POST 방식 - 데이터를 body에 담아서 보낸다.

fetch("/api/cafes", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ region, door, tags })
});

✔️ 특징:

• 데이터가 주소에 노출되지 않는다
• 조건이 많거나 복잡할 때 사용
• 생성(create) 요청에도 사용

③ 서버의 역할 (Response)
서버는 요청을 받으면 1) DB에서 조건에 맞는 카페를 찾고, 2) 그 결과를 JSON 형태로 만들어 프론트엔드에 응답한다.

예:

[
  {
    "id": 1,
    "name": "카페 A",
    "region": "서강대"
  },
  {
    "id": 2,
    "name": "카페 B",
    "region": "서강대"
  }
]

④ 화면에 그리기 (Rendering)

• 받아온 데이터를 상태에 저장한다.

const [cafes, setCafes] = useState([]);

useEffect(() => {
  fetch(...)
    .then(res => res.json())
    .then(data => setCafes(data));
}, []);

• setCafes(data)가 실행되면 리액트는 다시 렌더링을 하고 화면에 카페 목록이 나타난다.