[React]history push/replace

eassyยท2021๋…„ 7์›” 31์ผ
0

react

๋ชฉ๋ก ๋ณด๊ธฐ
4/5

๐ŸŒ€ ์กฐ๊ธˆ ๋ณต์žกํ•œ ๋ผ์šฐํŒ…

์ง€๊ธˆ๊นŒ์ง€๋Š” react-router-dom์„ ์‚ฌ์šฉํ•˜๋ฉด์„œ ๊ทธ์ € ํŽ˜์ด์ง€๋ฅผ ์ง€์ •ํ•ด์ฃผ๊ณ 
๊ทธ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜๋Š” ์ž‘์—…๋งŒ์„ ํ–ˆ์—ˆ๋Š”๋ฐ,
history์— ์–ด๋–ค ๋ฐ์ดํ„ฐ๋ฅผ ์Œ“๊ฑฐ๋‚˜, ๋ฎ์–ด์”Œ์šฐ๋Š” ์ž‘์—…๋„ ํ•  ์ˆ˜ ์žˆ๋Š”๊ฑธ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค.
๊ทธ ์ค‘์—์„œ history์˜ ๋ฉ”์„œ๋“œ์ธ push์™€ replace๋ฅผ ์•Œ์•„๋ณด์ž ๐Ÿ˜Ž
(๊ฐ„๋‹จํ•˜๊ฒŒ go๋„ ์ •๋ฆฌํ•ด๋ณด์ž)


history

history๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ™˜๊ฒฝ์—์„œ ํžˆ์Šคํ† ๋ฆฌ ์„ธ์…˜์„ ๊ด€๋ฆฌํ•˜๋Š” ๋„๊ตฌ์ด๋ฉฐ
stack์œผ๋กœ ์Œ“์ด๊ฒŒ ๋œ๋‹ค.

react-router-dom์—์„œ์˜ history๋Š” ๋ผ์šฐํŠธ๋กœ ์‚ฌ์šฉ๋œ ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ
match, location ๊ณผ ํ•จ๊ป˜ ์ „๋‹ฌ๋˜๋Š” props ์ค‘ ํ•˜๋‚˜์ด๋‹ค.
๊ทธ ์ค‘์— go, push, replace ๋ฉ”์†Œ๋“œ์— ๋Œ€ํ•ด ์ •๋ฆฌํ•ด๋ณด์ž.

history.go

๋‹จ์ˆœํ•˜๊ฒŒ ์–ด๋Š ์‹œ์ ์œผ๋กœ์˜ ์ด๋™์„ ํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.
history.go() ์•ˆ์— ์ˆซ์ž๋‚˜ url์„ ๋„ฃ์–ด์„œ ์‚ฌ์šฉํ•œ๋‹ค.

  • go(1) = goForward()
  • go(-1) = goBack()

history.push

When using the router.push, it adds a new route to the top of the stack.

์œ„์ฒ˜๋Ÿผ, push๋Š” stack์„ history ์ œ์ผ ์œ„์— ์Œ“๋Š” ๊ฒƒ์ด๋‹ค.
history.push()์•ˆ์—๋Š” ์ด๋™ํ•˜๊ณ ์ž ํ•˜๋Š” path๊ฒฝ๋กœ๋ฅผ ๋„ฃ์–ด์ฃผ๊ฒŒ ๋˜๋ฉด
์ด์ „ history์œ„์— ์Œ“์ด๊ฒŒ ๋œ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ๊ฒฝ๋กœ ์ด๋™์„
Home โžก๏ธ Profile โžก๏ธ Login
์ˆœ์„œ๋กœ ์ด๋™ํ•œ๋‹ค๊ณ  ํ–ˆ์„ ๋•Œ, history.push("/Profile")์„ ๋‚ ๋ฆฌ๋ฉด
Home โžก๏ธ Profile โžก๏ธ Login โžก๏ธ Profile
์ˆœ์„œ๋กœ ์Œ“์ด๊ฒŒ ๋œ๋‹ค.

history.replace

When you use the router.replace, you're overwritting the top of the the stack.

replace๋Š” history ์ œ์ผ ์œ„์— ์žˆ๋Š” ์›์†Œ๋ฅผ ๋ฎ์–ด์”Œ์šฐ๋Š” ๊ฒƒ์ด๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ๊ฒฝ๋กœ ์ด๋™์„
Home โžก๏ธ Profile โžก๏ธ Login
์ˆœ์„œ๋กœ ์ด๋™ํ•œ๋‹ค๊ณ  ํ–ˆ์„ ๋•Œ, history.replace("/Profile")์„ ๋‚ ๋ฆฌ๋ฉด
๋งจ ์œ„์— ์žˆ๋Š” Login์„ ๋‚ ๋ ค๋ฒ„๋ฆฌ๊ณ , ์ƒˆ๋กœ ๋‚ ๋ผ์˜จ Profile๋กœ ๋ฎ์–ด์”Œ์šด๋‹ค.
Home โžก๏ธ Profile โžก๏ธ Profile
์ˆœ์„œ๋กœ ๋ฐ”๋€Œ๊ฒŒ ๋œ๋‹ค.


router์—์„œ๋Š” ํžˆ์Šคํ† ๋ฆฌ๋ฅผ ๋‚จ๊ธฐ๊ธฐ ์œ„ํ•ด์„œ push๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.
๋Œ€๋ถ€๋ถ„ replace๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ๋Š” ์ •ํ•ด์ ธ์žˆ๋‹ค.
replace๋Š” ์ด์ „์— ์Œ“์ธ ํžˆ์Šคํ† ๋ฆฌ๋ฅผ ๋ฎ์–ด์”Œ์šฐ๊ธฐ ๋•Œ๋ฌธ์—
ํžˆ์Šคํ† ๋ฆฌ๋ฅผ ๋‚จ๊ธฐ์ง€ ์•Š๊ธฐ ์œ„ํ•œ ์ž‘์—…์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.
(์˜ˆ๋ฅผ ๋“ค๋ฉด, ์ž˜๋ชป๋œ ๊ฒฝ๋กœ๋กœ ์ ‘๊ทผํ•˜๋ ค ํ•˜๋Š” ๊ฒฝ์šฐ๋‚˜, login ํ•œ ์œ ์ €๊ฐ€ ๋‹ค์‹œ login ์ฐฝ์œผ๋กœ ์ ‘๊ทผํ•˜๋ ค ํ•  ๋•Œ ๋“ฑ๋“ฑ)

๋‹ค์Œํฌ์ŠคํŒ…์—์„œ๋Š” typescript์—์„œ history๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์“ฐ์ด๋Š” hook์ธ useHistory์— ๋Œ€ํ•ด์„œ๋„ ์ •๋ฆฌํ•ด๋ณผ ์˜ˆ์ •!

์ฐธ๊ณ ํ•˜์˜€์Šต๋‹ˆ๋‹ค :)

profile
์‰ฝ๊ฒŒ ์‚ฌ๋Š”๊ฑด ์žฌ๋ฏธ๊ฐ€ ์—†๋”๊ตฐ์š”, ์ƒˆ๋กœ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค๐Ÿค“

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