React

[React] ๋ฆฌ๋‹ค์ด๋ ‰ํŠธ๋ฅผ ์ด์šฉํ•œ ๋กœ๊ทธ์ธ ํ›„ ์ด์ „ ํŽ˜์ด์ง€ ์ด๋™

martinooo 2023. 2. 17. 15:22
728x170

 

๐Ÿคท‍โ™‚๏ธ React ๋กœ๊ทธ์ธํ›„ ๋กœ๊ทธ์ธ ์ด์ „ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜๋Š” ๋ฐฉ๋ฒ•.


1. ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ํŽ˜์ด์ง€ ์ด๋™์‹œ navigate์— state์— pathname ๊ฐ’์„ ํ• ๋‹น

2. ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ login ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜๊ณ  ๋กœ๊ทธ์ธ ํ›„ ๋‹ค์‹œ ์ปค๋ฎค๋‹ˆํ‹ฐ ํŽ˜์ด์ง€๋กœ ์ด๋™


Router

 


Header Login ์ด๋™ 

1. react-router-dom์— useLocation ์‚ฌ์šฉ

2. pathname์œผ๋กœ ํ˜„์žฌ ํŽ˜์ด์ง€ path๊ฐ’์„ ์ฐพ๊ณ  login ์ด๋™์‹œ state์— ํ˜„์žฌ ํŽ˜์ด์ง€ path๋ฅผ ๋„ฃ์–ด์ค€๋‹ค. 

 

\


Sign in ์ด๋™

1. react-router-dom์— useLocation ์‚ฌ์šฉ

2. useLocation์— state ์ฐพ๋Š”๋‹ค.

3. ๋กœ๊ทธ์ธ ์„ฑ๊ณต ํ›„์— navigate์— ๋ฐ›์•„์˜จ state ๊ฐ’์œผ๋กœ ์ด๋™์‹œํ‚จ๋‹ค. 

 

url๋กœ ์ ‘์† ํ•˜๊ฒŒ๋˜๋ฉด state ์—†์„์ˆ˜๋„ ์žˆ๊ธฐ๋•Œ๋ฌธ์— ์˜ˆ์™ธ์ฒ˜๋ฆฌ๋ฅผ ํ•ด์ฃผ๋ฉด ๋œ๋‹ค. 

 

  if (state) {
    navigate(state);
} else {
    navigate('/');
}

 

๊ทธ๋ฆฌ๋“œํ˜•