ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • ํ”„๋กœ์ ํŠธ TIL (2) - [ window.location.replace() ]
    ํ”„๋กœ์ ํŠธ ๋ฆฌ๋ทฐ/Book-Square 2020. 9. 14. 22:38

     

    ์˜ค๋Š˜ ํ•œ ์ผ ๐Ÿคช

     

    ์˜ค๋Š˜์€ ๋ฆฌ์•กํŠธ๋กœ MyLibrary ํŽ˜์ด์ง€๋ฅผ ๊ตฌํ˜„ํ•˜๋ฉด์„œ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ฐ”๋€œ์— ๋”ฐ๋ผ ํ™”๋ฉด์— ์ƒˆ๋กœ๊ณ ์นจ์ด ํ•„์š”ํ•œ ๋ถ€๋ถ„์— ๋Œ€ํ•˜์—ฌ ์–ด๋–ป๊ฒŒ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์•ผ ํ•  ๊นŒ ๊ณ ๋ฏผ์„ ํ•˜๋‹ค๊ฐ€ window.location.replace() ๋ผ๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ์ฒ˜์Œ ์‚ฌ์šฉํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค..

     

    ๋จผ์ € ์ œ๊ฐ€ ๊ตฌํ˜„ํ•˜๊ณ ์ž ํ–ˆ๋˜ ๊ฒƒ์€ ๋‚ด ์„œ์žฌ์— ์žˆ๋Š” ์ฑ…์„ ์‚ญ์ œํ–ˆ์„ ๋•Œ ์‚ญ์ œํ•œ ์ฑ…์„ ๋บ€ ๋‚˜๋จธ์ง€ ์ฑ…์„ ๋‹ค์‹œ UI๋กœ MyLibrary ํŽ˜์ด์ง€์— ๋ฐ”๋กœ๋ฐ”๋กœ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค. ์ €๋Š” ์ด ๊ณผ์ •์„ ์ž‘์„ฑํ•˜๋ฉด์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ณผ์ •์„ ๊ฑฐ์น˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

     


     

    1. useEffect๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํŠน์ • Props๊ฐ€ ๋ฐ”๋€” ๋•Œ, ๋ฆฌ๋ Œ๋”๋ง ์‹œํ‚ค๊ธฐ
    2. history.push()๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํŽ˜์ด์ง€ ์ด๋™์‹œํ‚ค๊ธฐ
    3. window.location.replace("/MyLibrary") ๋ฅผ ํ†ตํ•ด ์ƒˆ๋กœ๊ณ ์นจ ํšจ๊ณผ ๋‚ด๊ธฐ

     


     

     

    ๋จผ์ € 3๋ฒˆ๊ฐ™์€ ๊ฒฝ์šฐ๋Š” ์ฒ˜์Œ history.push()๋ฅผ ๊ตฌ๊ธ€๋งํ•  ๋•Œ ์˜ค๋ฉฐ๊ฐ€๋ฉฐ ๋ดค๋˜ ๋ฉ”์„œ๋“œ์˜€๋Š”๋ฐ ๊ทธ ๋•Œ๋Š” ํ•„์š”ํ•˜์ง€ ์•Š์•„์„œ ๊ทธ๋ƒฅ ์ง€๋‚˜์ณค์—ˆ์Šต๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒํ•˜๋ฉด ์ƒˆ๋กœ๊ณ ์นจํ•˜๋Š” ํšจ๊ณผ๋ฅผ ๋‚ผ ์ˆ˜ ์žˆ์„๊นŒ ํ•˜๊ณ  ๊ณ ๋ฏผํ•˜๋˜ ์ค‘ ๋ฌธ๋“ ๊ตฌ๊ธ€๋งํ•˜๋ฉฐ ๋ดค์—ˆ๋˜ ์ด ๋ฉ”์„œ๋“œ๊ฐ€ ๋– ์˜ฌ๋ผ์„œ ์ฝ”๋“œ์— ์ ์šฉ์‹œํ‚ค๋‹ˆ ๋‚ด๊ฐ€ ์›ํ•˜๋˜๋Œ€๋กœ ์ž‘๋™์€ ํ•˜์ง€๋งŒ ์ด๊ฒŒ ์–ด๋–ค ๋ฉ”์„œ๋“œ์ธ์ง€ ์•Œ์•„๋ณผ ํ•„์š”๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

     

     

     

     

    window.location.replace()

     

     

    ๋จผ์ € ์ด ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ„๋žตํ•˜๊ฒŒ ํ‘œ๋กœ ์ •๋ฆฌํ•ด๋ณด๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

     

      window.location.replace()
    ๊ธฐ๋Šฅ ๊ธฐ์กดํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€๋กœ ๋ณ€๊ฒฝ
    ํ˜•ํƒœ ๋ฉ”์„œ๋“œ
    ์ฃผ์†Œ ํžˆ์Šคํ† ๋ฆฌ ๊ธฐ๋ก๋˜์ง€ ์•Š์Œ
    ์‚ฌ์šฉ ์˜ˆ location.replace("./MyLibrary");

     

    ์™œ ์ด ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ๋Š”์ง€๊นŒ์ง€์˜ ์ด์œ ๋ฅผ ๋“ค์ž๋ฉด 

     


     

    1. ๊ธฐ์กด ํŽ˜์ด์ง€๋ฅผ "์ƒˆ๋กœ์šด ํŽ˜์ด์ง€" ๋กœ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ "์ƒˆ๋กœ์šด ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์™€ ์ด์ „๊ณผ ๋‹ค๋ฅธ ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€" ๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค๋ฉด ์™„์ „ ๋‹ค๋ฅธ ๋ฌธ์ œ๋Š” ์•„๋‹ˆ๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๊ธฐ์— ์ ์šฉ
    2. ์ƒˆ๋กœ ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ํŽ˜์ด์ง€๋ฅผ ๋ณด์—ฌ์ค€ ํ›„์— ๋’ค๋กœ๊ฐ€๊ธฐ๋ฅผ ๋ˆŒ๋Ÿฌ ์ด์ „ ํŽ˜์ด์ง€๋กœ ๊ฐˆ ํ•„์š”๋Š” ์—†๊ธฐ ๋•Œ๋ฌธ์— ์ฃผ์†Œ ํžˆ์Šคํ† ๋ฆฌ๊ฐ€ ๊ธฐ๋ก๋˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์ 
    3. history๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด import๋กœ ๋ถˆ๋Ÿฌ์˜ค๊ณ  withRouter๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ž˜ํ•‘ํ•ด์•ผํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€ ์—†์ด ๋ฐ”๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด์„œ ๊ฐ„ํŽธํ•˜๋‹ค!

     

    ์ ์ ˆํ•œ ์ด์œ ์ผ์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ ์ฑ… ์‚ญ์ œ๋ฅผ ๋ˆ„๋ฅธ ํ›„ state๊ฐ’์ด ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒƒ๋„ ์—†์„ ๋ฟ๋”๋Ÿฌ ํŽ˜์ด์ง€ ๋ฆฌ๋ Œ๋”๋ง์„ ์œ„ํ•ด ์ƒˆ๋กœ์šด state๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์€ ๋ถˆํ•„์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๊ณ  ์ง€๊ธˆ ๋‚ด๊ฐ€ ์ž‘์„ฑํ•œ ์ฝ”๋“œ์—์„œ๋Š” ์ด ๋ฐฉ๋ฒ•์ด ๊ฐ€์žฅ ์ตœ์„ ์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.

     

     

     

    ๋งŒ์•ฝ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์œผ๋กœ ๊ตฌํ˜„ํ•ด๋ณธ๋‹ค๋ฉด ?

     

    ์ง€๊ธˆ ์ œ ํ”„๋กœ์ ํŠธ์—์„œ ์ด ๋ฐฉ๋ฒ•๋ง๊ณ  ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์„ ์ ์šฉํ•ด๋ณธ๋‹ค๊ณ  ํ•˜๋ฉด useEffect๋ฅผ ํ†ตํ•ด ๋ Œ๋”๋ง ๋˜๊ธฐ ์ „ dispatch๋ฅผ ํ†ตํ•ด ์„œ๋ฒ„์—์„œ ๋‚ด ๋„์„œ ๋ชฉ๋ก์„ ๋ฐ›์•„์˜ค๋Š” ์ž‘์—…์„ ํ•œ ํ›„, ๋ฆฌ๋•์Šค ์Šคํ† ์–ด์— ์ƒํƒœ๋ฅผ ์ €์žฅํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    ๊ทธ๋ž˜์„œ ์ฑ…์„ ์‚ญ์ œํ•˜๋ฉด ๋ฆฌ๋•์Šค ์Šคํ† ์–ด์— ์‚ญ์ œ ๋œ ์ฑ…์„ ๋บ€ ๋‚˜๋จธ์ง€ ๋ชฉ๋ก๋“ค์„ ์—…๋ฐ์ดํŠธ ์‹œ์ผœ์คŒ์œผ๋กœ์จ ์ปดํฌ๋„ŒํŠธ์˜ ๋ฆฌ๋ Œ๋”๋ง์„ ๋ฐœ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

     

    ํ•˜์ง€๋งŒ ์ด ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ์ด์œ ๋Š” ํ•ด๋‹น state๋Š” ๋ฆฌ๋•์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ํ•ด์•ผ ํ•  ํ•„์š”๊ฐ€ ์—†์„ ๋ฟ๋”๋Ÿฌ ๋‹จ์ง€ ๋‚ด๊ฐ€ ์ง€๊ธˆ ๊ฒช๊ณ  ์žˆ๋Š” ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋ฆฌ๋•์Šค ๋ชจ๋“ˆ์„ ํ•˜๋‚˜ ๋” ์ƒ์„ฑํ•œ๋‹ค๋Š” ๊ฒƒ์€ ํšจ์œจ์ ์ด์ง€ ๋ชปํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

     

     

     

     

    ๋‚ด๊ฐ€ ์ƒ๊ฐํ•˜๊ธฐ์— ์ด ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์€ ๋•Œ๋Š” ?

     

    ๋กœ๊ทธ์ธํŽ˜์ด์ง€์—์„œ ๋กœ๊ทธ์ธ ํ›„ ๋’ค๋กœ๊ฐ€๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๊ฐ€ ๋‹ค์‹œ ๋‚˜์˜ค์ง€ ์•Š๊ธฐ๋ฅผ ๋ฐ”๋ž€๋‹ค๋ฉด window.location.replace() ๋ฉ”์„œ๋“œ๊ฐ€ ์ ํ•ฉํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

    ์‹ค์ œ๋กœ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๋ฅผ ๊ตฌํ˜„ํ•˜๋ฉด์„œ browser history๋ฅผ ์กฐ์ž‘ํ•˜๋Š”๋ฐ ๋กœ๊ทธ์ธ์„ ํ•œ ์‚ฌ์šฉ์ž๊ฐ€ ๋’ค๋กœ๊ฐ€๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ ๋ณด๋Š” ๊ฒƒ์€ ์ ์ ˆํ•˜์ง€ ์•Š๋‹ค๊ณ  ์ƒ๊ฐํ•ด์„œ ์—ฌ๋Ÿฌ ์‚ฌ์ดํŠธ๋“ค์„ ์ฐธ๊ณ ํ•œ ๊ฒฐ๊ณผ ๋’ค๋กœ๊ฐ€๊ธฐ๋ฅผ ๋ˆŒ๋ €์„ ๋•Œ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๊ฐ€ ๋‚˜์˜ค๋Š” ์‚ฌ์ดํŠธ๊ฐ€ ๋งŽ์€ ๊ฒƒ์„ ๋ณด๊ณ  UI์ ์œผ๋กœ ์ด์ƒํ•œ ๊ฒƒ์€ ์•„๋‹Œ ๊ฒƒ ๊ฐ™๋‹ค๋ผ๋Š” ํŒ๋‹จ์„ ๋‚ด๋ ค ์ผ๋‹จ ์ œ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” history.push() ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

     

    ์œ„์™€ ๊ฐ™์€ ๊ฒฝ์šฐ์ฒ˜๋Ÿผ ๋’ค๋กœ๊ฐ€๊ธฐ๋ฅผ ํ†ตํ•ด ์ด์ „์— ๋ฐฉ๋ฌธํ–ˆ๋˜ ํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ ๋ฐฉ๋ฌธํ•˜์ง€ ์•Š๊ฒŒ ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด window.location.replace() ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

     


     

    ๋งˆ์น˜๋ฉฐ

     

    ๋ถ„๋ช… ๋” ์ข‹์€ ๋ฐฉ๋ฒ•์ด ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์•„๋‹ˆ ์žˆ์Šต๋‹ˆ๋‹ค............ ์ € ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ ์•„์ง ์ฐ์ฐํ•จ์ด ๋‚จ์•„์žˆ๊ธฐ ๋•Œ๋ฌธ์—...

    ์ฑ…์„ ์‚ญ์ œํ•  ๋•Œ๋งˆ๋‹ค ๋ฆฌ๋ Œ๋”๋ง์„ ํ•  ๊ฒƒ์ด๊ณ  ๋ฆฌ๋ Œ๋”๋ง์ด ๋˜๋ฉด useEffect๋ฅผ ํ†ตํ•ด ๊ณ„์†ํ•ด์„œ ์„œ๋ฒ„์— ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•˜๊ณ  ์žˆ๋Š”๋ฐ ์ด ์ž‘์—…์ด ๊ณผ์—ฐ ๋งž๋Š” ๊ฒƒ์ผ๊นŒ ํ•˜๋Š” ์ƒ๊ฐ์ด ๋“ญ๋‹ˆ๋‹ค. 

     

    ๊ทธ๋ž˜๋„ ์ด๋ฒˆ ๊ธฐํšŒ๋ฅผ ํ†ตํ•ด history.push(), window.location.replace() ๋“ฑ๋“ฑ ํŽ˜์ด์ง€ ์ด๋™์— ๋Œ€ํ•œ ์ง€์‹์„ ๊ณต๋ถ€ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์–ด ์ข‹์•˜๋˜ ์‚ฝ์งˆ? ์ด์—ˆ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค!! 

     

     

    ์ฐธ๊ณ ํ–ˆ๋˜ ๋ ˆํผ๋Ÿฐ์Šค

    https://stackoverflow.com/questions/40210673/whats-the-different-between-browserhistory-push-and-location-replace

    https://stackoverflow.com/questions/47583856/window-location-href-vs-history-pushstate-which-to-use/47583989

     

     

     

     

     

    ( ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋ฉฐ ๊ตฌ๊ธ€๋ง์€ ๊ณ„์† ํ• ํ…Œ๋‹ˆ ์˜ค๋ฉฐ๊ฐ€๋ฉฐ ๋ณด์ด๋Š” ํŽ˜์ด์ง€ ์ด๋™ ๊ด€๋ จ ์ด์Šˆ๋ฅผ ๋” ๋ˆˆ์—ฌ๊ฒจ ๋ณด๊ณ  ๋ถ๋งˆํฌํ•˜์—ฌ ๋ชจ์•„๋†“์•„์•ผ ๊ฒ ๋‹ค.....๐Ÿ˜‚)

     

     

    ๋Œ“๊ธ€ 0

Designed by Tistory.