๐Ÿ“š react router additional Hook & Component

kcj_dev96ยท2022๋…„ 2์›” 18์ผ
0

๋ฆฌ์•กํŠธ

๋ชฉ๋ก ๋ณด๊ธฐ
15/23

์ด์ „ ํฌ์ŠคํŒ…์—์„œ react router์—์„œ ์ฃผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ์ปดํฌ๋„ŒํŠธ ๋ฐ ๊ธฐ์ˆ ๋“ค์„ ์•Œ์•„๋ณด์•˜๋‹ค.

์ฃผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ react router๋กœ ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ๋•Œ ํ•„์š”ํ•œ ํ›…์ด๋‚˜ ์ปดํฌ๋„ŒํŠธ๋“ค์ด ์žˆ๋‹ค.

๋ณธ ํฌ์ŠคํŒ…์—์„œ๋Š” ๋ถ€๊ฐ€์ ์ธ ํ›…๊ณผ ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ๋‹ค.

๐Ÿ“š Hook & Component

react router์—์„œ ํ”„๋กœ๊ทธ๋žญ๋ฐ์ ์œผ๋กœ ๊ฒฝ๋กœ ์ด๋™์„ ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋‘ ๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค.

  • useNavigate
  • Navigate

์œ„ API๋“ค์€ ์šฐ๋ฆฌ๊ฐ€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ ์œผ๋กœ ๊ฒฝ๋กœ ์ด๋™์„ ํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.

์—ฌ๊ธฐ์„œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ ์ด๋ผ๋Š” ๊ฒƒ์€ ์–ด๋– ํ•œ ๋กœ์ง์„ ๊ตฌ์„ฑํ•˜๋ฉด์„œ ๊ฒฝ๋กœ ์ด๋™์„ ํฌํ•จ์‹œํ‚ค๋Š” ๊ฒƒ์ด๋‹ค.

Link๋‚˜ NavLink์™€ ๊ฐ™์€ ์ปดํฌ๋„ŒํŠธ๋Š” ์ง๊ด€์ ์œผ๋กœ ์–ด๋– ํ•œ ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ฐ€์ง„ ์ปดํฌ๋„ŒํŠธ์ด๋‹ค.

ํ•˜์ง€๋งŒ useNavigate๋‚˜ Navigate๋Š” ์–ด๋– ํ•œ ๋กœ์ง์„ ๊ตฌ์„ฑํ•  ๋•Œ ์‚ฌ์šฉ์ž๊ฐ€ ์ž„์˜๋กœ ๊ฒฝ๋กœ๋ฅผ ์„ค์ •ํ•˜์—ฌ ์œ ๋™์ ์ธ ์กฐ์ž‘์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ,

  • form์„ ์ œ์ถœํ•œ ๋‹ค์Œ ํŠน์ • ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•˜๊ฒŒ ํ•˜๊ธฐ
  • checkbox์— check๋ฅผ ํ•˜๋ฉด ํŠน์ • ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•˜๊ฒŒ ํ•˜๊ธฐ
  • ์ •๋ณด๋ฅผ ์•Œ๋งž๊ฒŒ ์ž…๋ ฅํ•˜์—ฌ ์™„์„ฑํ•˜๋ฉด ์ด๋™ํ•˜๊ฒŒ ํ•˜๊ธฐ

๋“ฑ์œผ๋กœ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ƒํ™ฉ์— ๋งž์ถฐ ํŠน์ • ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค.

1. useNavigate(imperative)

userNavigate hook์€ ์›ํ•˜๊ณ ์ž ํ•˜๋Š” ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•ด์ค€๋‹ค.
const navigate = useNavigate()
navigate("./home", { replace: true },{state : any});

  • useNavigate๋Š” version 6์ด์ „์˜ useHistory๋ฅผ ๋Œ€์ฒดํ•˜์—ฌ ๋งŒ๋“ค์–ด์ง„ API์ด๋‹ค.

  • React Router's imperative API for programmatically navigating.


use

  • ์ด์ „ ํŽ˜์ด์ง€๋‚˜ ๋‹ค์Œ ํŽ˜์ด์ง€๋กœ ์ด๋™ ๊ฐ€๋Šฅ (indexํ™œ์šฉ)
  • ํŠน์ • ๊ฒฝ๋กœ๋กœ ์ด๋™

useNavigate hook์€ ์›ํ•˜๊ณ ์ž ํ•˜๋Š” ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•ด์ค€๋‹ค.

const navigate = useNavigate()


์ฒซ ๋ฒˆ์งธ ์ธ์ž๋กœ๋Š” ์ด๋™ํ•˜๊ณ ์ž ํ•˜๋Š” ๊ฒฝ๋กœ๋ฅผ ํ• ๋‹นํ•ด์ค€๋‹ค.
์ธ๋ฑ์Šค๋ฅผ ํ• ๋‹นํ•ด์ฃผ๋ฉด ์ด์ „ ํŽ˜์ด์ง€(-1)๋‚˜ ๋‹ค์Œ ํŽ˜์ด์ง€(1)๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ๋‹ค.

navigate("/dashboard") //specific route
navigate(-1) //back
navigate(1) //next

import React from "react";
import { Outlet, useNavigate } from "react-router-dom";

const LayOut = () => {
  const navigate = useNavigate();

  return (
    <div>
      <h1>Home</h1>

      <button
        onClick={() => {
          navigate("/dashboard");
        }}
      >
        Submit
      </button>
      <button
        onClick={() => {
          navigate(-1);
        }}
      >
        Prev
      </button>
      <button
        onClick={() => {
          navigate(1);
        }}
      >
        Next
      </button>
      <Outlet />
    </div>
  );
};

export default LayOut;

submit ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด dashboard๊ฒฝ๋กœ๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ๋‹ค.
Prev ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ์ด์ „ ๊ฒฝ๋กœ๋กœ, Next ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ๋‹ค์Œ ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ๋‹ค.

์ด์ „ ๊ฒฝ๋กœ์™€ ๋‹ค์Œ ๊ฒฝ๋กœ๋ฅผ navigate()์˜ ์ธ์ˆ˜๋กœ index๋ฅผ ํ• ๋‹นํ•ด์ค„ ์ˆ˜ ์žˆ๋‹ค.

๋ฐ”๋กœ ์ด์ „ ๊ฒฝ๋กœ (-1)
๋ฐ”๋กœ ๋‹ค์Œ ๊ฒฝ๋กœ (1)


๋‘ ๋ฒˆ์งธ ์ธ์ž๋Š” ์„ ํƒ์  ์˜ต์…˜์ด๋‹ค.

๋‘ ๊ฐ€์ง€ ์˜ต์…˜์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ state, replace ์ด๋‹ค.
{ replace?: boolean; state?: any }
navigate("/dashboard" {replace : true},{state:any})

state

Location State - A value that persists with a location that isn't encoded in the URL. Much like hash or search params (data encoded in the URL), but stored invisibly in the browser's memory. by location react router official Docs

  • state : state ๊ฐ’์„ ํ• ๋‹นํ•ด์ฃผ๋ฉด ํ•ด๋‹น ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•˜์˜€์„ ๋•Œ, location.state๊ฐ’์„ ์ „๋‹ฌ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, login > setting์œผ๋กœ ์ด๋™ํ•˜์˜€์„ ๋•Œ, navigate("/setting")์„ ์‚ฌ์šฉํ–ˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž.

์ด ๋•Œ login ํŽ˜์ด์ง€์˜ ํŠน์ •๊ฐ’์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด state๋กœ ์ „๋‹ฌํ•ด์ค„ ์ˆ˜ ์žˆ๋‹ค.
navigate("/setting",{state:{id:myid,pw:mypw}})

์œ„์™€ ๊ฐ™์ด state๊ฐ’์„ ์ „๋‹ฌํ•ด์ฃผ๋ฉด setting์—์„œ location์œผ๋กœ ์กฐํšŒํ•˜์—ฌ state๊ฐ’์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

replace

  • replace : hisory stack์— ํ˜„์žฌ ๊ฒฝ๋กœ๋ฅผ ์Œ“์ด๊ฒŒ ํ•˜์ง€ ์•Š๋Š”๋‹ค.
    ๋•Œ๋ฌธ์— ์ด์ „ ํŽ˜์ด์ง€๋กœ ๋Œ์•„๊ฐ„๋‹ค๋ฉด ์ „ ๊ฒฝ๋กœ๋กœ ๋Œ์•„๊ฐ€๊ฒŒ ๋œ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, home > dashboard > login > setting ์ˆœ์œผ๋กœ ํŽ˜์ด์ง€ ์ด๋™์„ ํ–ˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž.

์ด ๋•Œ login ํŽ˜์ด์ง€์—์„œ setting ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜๊ธฐ ์œ„ํ•ด์„œ login ์ปดํฌ๋„ŒํŠธ ๋‚ด์—์„œ navigate("/setting")์„ ์‚ฌ์šฉํ•œ๋‹ค.

replace ์†์„ฑ์„ ํ• ๋‹นํ•˜์ง€ ์•Š์œผ๋ฉด ๋กœ๊ทธ์ธ์„ ํ•œ ๋’ค์— setting์—์„œ ๋’ค๋กœ๊ฐ€๊ธฐ๋ฅผ ๋ˆ„๋ฅด๋ฉด ๋‹ค์‹œ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๋กœ ๋Œ์•„๊ฐ„๋‹ค.

ํ•˜์ง€๋งŒ ๋กœ๊ทธ์ธ์„ ํ•˜๊ณ  ๋‚˜์„œ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๋กœ ๋Œ์•„๊ฐˆ ํ•„์š”๊ฐ€ ์—†๋‹ค.

์ด๋Ÿด ๋•Œ loginํŽ˜์ด์ง€์—์„œ navigate("/setting",{replace:true})์ฒ˜๋Ÿผ replace๋ฅผ ํ• ๋‹นํ•ด์ฃผ๋ฉด ๋กœ๊ทธ์ธ์„ ํ•œ๋’ค์— setting ํŽ˜์ด์ง€์—์„œ ๋’ค๋กœ๊ฐ€๊ธฐ๋ฅผ ๋ˆŒ๋Ÿฌ๋„ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๊ฐ€ ์•„๋‹Œ ์ด์ „ dashboardํŽ˜์ด์ง€๋กœ ๋Œ์•„๊ฐ€๊ฒŒ ๋œ๋‹ค.

๋•Œ๋ฌธ์— replace ์†์„ฑ์€ ํ˜„์žฌ ํŽ˜์ด์ง€๋ฅผ history stack์— ์Œ“์ง€ ์•Š๊ณ  ์ด์ „ ํŽ˜์ด์ง€๋กœ ๋Œ€์ฒดํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.


2. Navigate(declartive)

Navigate ์ปดํฌ๋„ŒํŠธ๋Š” ๋ Œ๋”๊ฐ€ ๋˜๋ฉด ํŠน์ • ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•˜๊ฒŒ ํ•ด์ค€๋‹ค.
<Navigate to="/login" replace />

  • React Router's declartive API for programmatically navigating.

useNavigate์™€ ๋‹ฌ๋ฆฌ ํ•จ์ˆ˜๋กœ ๊ฒฝ๋กœ์ด๋™์„ ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ ์ปดํฌ๋„ŒํŠธ๋กœ ๊ฒฝ๋กœ์ด๋™์„ ํ•œ๋‹ค.
Navigate๋Š” ๋ณดํ†ต ์กฐ๊ฑด์— ๋”ฐ๋ผ ํŠน์ • ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, authed๋ผ๋Š” ๋กœ๊ทธ์ธ ์ƒํƒœ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” state๊ฐ€ ์žˆ๋‹ค๊ณ  ํ•˜์ž.
const [authed,setAuthed] = useState(false)

์ด ๋•Œ authed๊ฐ€ false๋ฉด ๋กœ๊ทธ์ธ ์ปดํฌ๋„ŒํŠธ๋กœ ์ด๋™ํ•˜๊ฒŒ ํ•˜๊ณ  ์‹ถ๋‹ค๊ณ  ํ•˜์ž.
{!authed && <Navigate to="/login"/>}

์ด๋Ÿฌํ•œ ์ฝ”๋“œ๋กœ authed๊ฐ€ true๊ฐ€ ๋˜๋ฉด ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ Œ๋”๋˜๊ฒŒ ํ•˜๊ณ  authed๊ฐ€ false๋ฉด login ์ปดํฌ๋„ŒํŠธ๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

replace

useNavigate์˜ replace ์†์„ฑ์ฒ˜๋Ÿผ ์„ ํƒ์ ์œผ๋กœ ํ•„์š”ํ•  ๋•Œ ์‚ฌ์šฉํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

useNavigate or Navigate?

useNaviagte๋Š” imperative API์ด๊ณ  Navigate๋Š” declartive API์ด๋‹ค.

Imperative? Declartive?
Imperative๋Š” ์ง๊ด€์ ์ธ ์„ฑํ–ฅ์ด๋‹ค.
์กฐ๊ฑด์—†์ด ๊ธฐ๋Šฅ์„ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•œ๋‹ค.

Declartive๋Š” ์„œ์‚ฌ์ ์ธ ์„ฑํ–ฅ์ด๋‹ค.
ํŠน์ • ์กฐ๊ฑด์— ๋”ฐ๋ผ ์–ด๋– ํ•œ ๊ธฐ๋Šฅ์„ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•œ๋‹ค.

useNavigate(Imperative) Navigate(declartive)
useNavigate๋Š” Imperative Navigating API์ด๋‹ค.
์ด ๋ง์ธ ์ฆ‰์Šจ , ํŠน์ • ์กฐ๊ฑด ์—†์ด ๊ฒฝ๋กœ ์ด๋™์„ ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, state๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”ํ•˜์—ฌ ์ด๋™ํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ useNavigate๋Š” state๋ฅผ ์“ฐ์ง€ ์•Š๊ณ ๋„ ๊ธฐ๋Šฅ์„ ์‹คํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

Navigate๋Š” Declartive navigating API์ด๋‹ค.
์ด๋Š” ํŠน์ • ์กฐ๊ฑด์„ ๊ธฐ์ค€์œผ๋กœ ๊ธฐ๋Šฅ์„ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•œ๋‹ค.

Declartive๋Š” React๊ฐ€ ์ฃผ์žฅํ•˜๋Š” ํ•ต์‹ฌ ์›๋ฆฌ ์ค‘ ํ•˜๋‚˜์ด๋‹ค.


by ๋ฆฌ์•กํŠธ ๊ณตํ™ˆ

React will efficiently update and render just the right components when your data changes

  • ๋ฆฌ์•กํŠธ๋Š” data๊ฐ€ ๋ฐ”๋€œ์— ๋”ฐ๋ผ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์—…๋ฐ์ดํŠธํ•ด์ค€๋‹ค.
    Declarative views make your code more predictable and easier to debug.
  • Declarative view๋Š” ์ฝ”๋“œ๋ฅผ ์˜ˆ์ธก๊ฐ€๋Šฅํ•˜๊ณ  ์˜ค๋ฅ˜๋ฅผ ์žก์•„๋‚ด๊ธฐ ์‰ฝ๊ฒŒ ํ•ด์ค€๋‹ค.

React๋Š” state๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”ํ•ด์ค€๋‹ค.
React router์˜ Navigate๋„ React์˜ ์›์น™์ฒ˜๋Ÿผ Declartiveํ•˜๊ฒŒ ์ฆ‰, state ๋ณ€ํ™”์— ๋”ฐ๋ผ Navigate๋ฅผ ๋ Œ๋”ํ•ด์ค„ ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋‹ค.

React์—์„œ state๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•ด์ฃผ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ Navigate๋„ state๋ฅผ ๊ธฐ์ค€์œผ๋กœ Navigate๋ผ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ์ด๋‹ค.
(๋ฐ˜๋“œ์‹œ ๊ทธ๋Ÿฐ ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๊ทธ๋Ÿฌํ•œ ๋กœ์ง์œผ๋กœ ๊ตฌ์„ฑํ•˜๋Š” ๊ฒƒ)

๋ฆฌ์•กํŠธ์—์„œ ์ œ์‹œํ•˜๋Š” ์ด์ ์ฒ˜๋Ÿผ ์–ด๋– ํ•œ ์ƒํƒœ์— ๋”ฐ๋ผ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์—…๋ฐ์ดํŠธ ํ•ด์ค€๋‹ค๋Š” ๊ฒƒ์€ ์ฝ”๋“œ๊ฐ€ ๋…ผ๋ฆฌ๊ฐ€ ์žˆ๊ณ  ์ถ”์ ํ•˜๊ธฐ๊ฐ€ ์‰ฝ๋‹ค๋ผ๋Š” ๊ฒƒ์„ ์–˜๊ธฐํ•˜๋Š” ๊ฒƒ ๊ฐ™๋‹ค.

useNavigate๋Š” ์–ด๋– ํ•œ ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œ์ผฐ์„ ๋•Œ๋ผ๋˜์ง€ ๋“ฑ ์–ด๋– ํ•œ ๊ธฐ๋Šฅ์„ ๋ฐœ์ƒ์‹œ์ผฐ์„ ๋•Œ ์‚ฌ์šฉํ•˜๊ณ ,Navigate๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ Œ๋”๊ฐ€ ๋ฌ์„ ๋•Œ ๊ฒฝ๋กœ ์ด๋™์„ ํ•˜๊ณ  ์‹ถ์œผ๋ฉด ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

์ฝ”๋“œ ๋ฌธ๋งฅ์— ๋”ฐ๋ผ ๋‘˜ ์ค‘์— ๊ณจ๋ผ ์‚ฌ์šฉํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™๋‹ค.
์กฐ๊ธˆ ๋” ์ง๊ด€์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด useNavigate Hook์„ , React์Šค๋Ÿฝ๊ฒŒ navigatingํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด Navigate ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋˜๊ฒ ๋‹ค.

์ฐธ์กฐ : How to Programmatically Navigate with React Router

3. useLocation

The useLocation() hook provides us access to the browser's location object.

  • useLocation hook์€ location object์— ์ ‘๊ทผํ•˜๊ฒŒ ํ•ด์ค€๋‹ค.

location object๋ž€ ๋ฌด์—‡์ผ๊นŒ?

location๋ž€?

  • The browser has a location object on window.location. It tells you information about the URL but also has some methods to change it:
  • This is a React Router specific object that is based on the built-in browser's window.location object.
    It represents "where the user is at". It's mostly an object representation of the URL but has a bit more to it than that.
    by location react router official Docs

location object๋Š” window.location์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•œ ๊ฐ์ฒด์ด๋ฉฐ url์— ๋Œ€ํ•œ ์ •๋ณด๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋Š” ๋ฉ”์„œ๋“œ ๋“ฑ์˜ ๊ธฐ๋Šฅ๋“ค์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ฐ์ฒด์ด๋‹ค.

window.location์€ react router์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฅผ ๋” ๊ฐ„ํŽธํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก location API๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค.

location object๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ˜•ํƒœ๋ฅผ ๋„๊ณ  ์žˆ๋‹ค.

location object

{
  pathname: "/bbq/pig-pickins",
  search: "?campaign=instagram",
  hash: "#menu",
  state: null,
  key: "aefz24ie"
}

{ pathname, search, hash }์€ window.location์˜ ๊ธฐ๋Šฅ๊ณผ ๋˜‘๊ฐ™๋‹ค.
์„ธ ๊ฐ€์ง€ ๊ธฐ๋Šฅ์„ ์กฐํšŒํ•˜๋ฉด URL์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.

{state, key}๋Š” ํŠน์ˆ˜ํ•˜๋‹ค.

pathname

URL์˜ ๊ธฐ๋ณธ ๊ฒฝ๋กœ ๋’ค์— ์˜ค๋Š” ์ฃผ์†Œ์ด๋‹ค.
https://example.com/teams/hotspurs ๋ผ๋Š” URL์ด ์žˆ์„ ๋•Œ /teams/hotspurs๊ฐ€ pathname์ด๋‹ค.

search

location.search, search params,URL search params , query string์œผ๋กœ ๋‹ค์–‘ํ•œ ์šฉ์–ด๋กœ ์‚ฌ์šฉ๋œ๋‹ค.

react router์—์„œ๋Š” location.search๋กœ ์‚ฌ์šฉ๋œ๋‹ค.
URL ๋’ค์— query๋ฅผ ๊ฐ€์ ธ์˜ฌ ๋•Œ ์‚ฌ์šฉ๋œ๋‹ค.

https://example.com/teams/hotspurs?campaign=instagram์—์„œ
query => ?campaign=instagram

hash

์„œ๋ฒ„์— ์š”์ฒญํ•˜์ง€ ์•Š๊ณ  URL์„ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„์ด์ง€๋งŒ ์˜ค๋Š˜๋‚ ์— ์›ํ•˜๋Š” ์Šคํฌ๋กค ์œ„์น˜๋กœ ๋ณด๋‚ด๋Š” ๋“ฑ ๋””์ž์ธ ์ ์ธ ์š”์†Œ๋กœ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค.
https://example.com/#hash =>#hash

state

state๋Š” ํ•ด๋‹น location์— ๋“ค์–ด๊ฐ”์„ ๋•Œ์˜ ์ƒํƒœ๊ฐ’์„ ๋งํ•œ๋‹ค.

์ด๋Š” ๋ณธ๋ž˜ history.state๋กœ ์„ค์ • ๋ฐ ์กฐํšŒํ•˜์ง€๋งŒ react router์—์„œ ํ•ด๋‹น ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค.

๋•Œ๋ฌธ์— react router์—์„œ๋Š” state๋ฅผ location object์—์„œ ์กฐํšŒํ•  ์ˆ˜ ์žˆ๋„๋ก ํ–ˆ๋‹ค.

state๋Š” url์— ํ‘œ์‹œ๋˜์ง€์•Š์•„ url์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๋ณด์•ˆ์ ์œผ๋กœ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋‹ค.
state๋Š” ์ฃผ๋กœ ๋‹ค์Œ ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•˜์˜€์„ ๋•Œ ์ด์ „ ๊ฒฝ๋กœ์˜ data๋ฅผ ์ „๋‹ฌํ•  ๊ฒฝ์šฐ์— ๋งŽ์ด ์“ฐ์ธ๋‹ค.

state๋Š” Link๋‚˜ navigate(from useNavigate)์—์„œ ์‚ฌ์šฉ๋œ๋‹ค.

<Link to="/pins/123" state={{ fromDashboard: true }} />;

let navigate = useNavigate();
navigate("/users/123", { state: partialUser });

๊ทธ๋ฆฌ๊ณ  ๋‹ค์Œ ํŽ˜์ด์ง€์—์„œ ํ•ด๋‹น state๋ฅผ ์กฐํšŒํ•  ์ˆ˜ ์žˆ๋‹ค.

let location = useLocation();
location.state;

key

๊ฐ ํŽ˜์ด์ง€ location์€ ๊ณ ์œ ํ•œ key๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

useLocation

๋”ฐ๋ผ์„œ ์œ„์™€ ๊ฐ™์€ location ๊ธฐ๋Šฅ๋“ค์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„  useLocation hook์„ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

useLocation์€ ํ•ด๋‹น ํŽ˜์ด์ง€์— ๋Œ€ํ•œ location ๊ฐ์ฒด๋ฅผ ๋ถˆ๋Ÿฌ์™€์ค€๋‹ค.

const location = useLocation

์œ„์—์„œ ๋ดค๋˜ ๊ฒƒ๊ณผ ๊ฐ™์ด location์„ ์กฐํšŒํ•˜์—ฌ ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ๊ธฐ๋Šฅ๋“ค์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

profile
๊ฐœ๋ฐœ์ž์—ฌ์„œ ํ–‰๋ณตํ•œ Jev ๐Ÿ˜™ FE DEVELOPER JEV

0๊ฐœ์˜ ๋Œ“๊ธ€