WIL 7์ฃผ์ฐจ

hyena_leeยท2023๋…„ 1์›” 29์ผ
0

WIL

๋ชฉ๋ก ๋ณด๊ธฐ
11/21
post-thumbnail

๐Ÿ—“๏ธ๋ฐฐ์šด ๋‚ด์šฉ

1.React Spa
2. React Twittler State & Props
3. ussState
4. state, Props
5. ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ

๐ŸŒˆํšŒ๊ณ 

์„ค ์—ฐํœด ๋๋‚˜๊ณ  ๋ฐ”๋กœ ๊ณผ์ œ๋ฅผ ์‹œ์ž‘ํ•จ์— ์žˆ์–ด ํ”ผ๋กœ๋ˆ„์ ๊ณผ ์ปจ๋””์…˜ ํšŒ๋ณต && ๋‘๋‡Œ ํšŒ์ „์ด ๋˜์ง€ ์•Š๊ณ  ์žˆ๋‹ค. ๊ณผ์ œ๋Š” ํ•ด์•ผํ•˜๋‹ˆ๊น ๋ฌต๋ฌตํžˆ ๋…ธํŠธ๋ถ์— ์•‰์•„ ํ•ด๋‚˜๊ฐ€๊ณ  ์žˆ์ž๋ฏผ ๋จธ๋ฆฟ์†์— ์ „ํ˜€ ๋“ค์–ด์˜ค์ง€ ์•Š๋Š”๋‹ค. ๊ณผ์ œ๋Š” ๋ฌต๋ฌตํžˆ ์ˆ˜ํ–‰์„ ํ–ˆ์ง€๋งŒ ๋ญ”๊ฐ€ ํผ์ฆ ๋งž์ถ”๋“ฏ์ด ๋นˆ์นธ์„ ๋ฉ”๊พธ์–ด๋‚˜๊ฐ€๋Š” ๋Š๋‚Œ..๋‚ด์Šค์Šค๋กœ ์ฝ”๋“œ๋ฅผ ์ง ๊ฒŒ ์•„๋‹ˆ๋ผ ์ด๊ฒŒ ์ด๋Ÿฐ์‹์œผ๋กœ ํ˜๋Ÿฌ๊ฐ€๋Š”๊ฑฐ ์•Œ๊ฒ ์ง€๋งŒ ๋‚˜์ค‘์— ๋‚˜ํ˜ผ์ž ์ด์ฝ”๋“œ๋ฅผ ์งค ์ˆ˜ ์žˆ์„ ๊นŒ ํ•˜๋Š” ์˜๋ฌธ์ด ์ž๊พธ ๋“ค์—ˆ๋‹ค. ๋ฌผ๋ก  ์š”์ฆ˜ ๋งค์ผ ํ‹ˆํ‹ˆํžˆ ๊ฐ์„ ์žƒ๊ณ  ์‹ถ์ง€ ์•Š๊ณ  ํ•ด์„œ ์ž‘์€๊ฑฐ ํ•˜๊ณ  ์žˆ์ง€๋งŒ ๊ทธ๋ž˜๋„ ๋งค์ผ ์ˆœ๊ฐ„ ๋‘๋ ต๋‹ค. ๊ทธ๋ž˜์„œ ์˜ค๋Š˜์€ ๋ฐฐ์šด ๋‚ด์šฉ ์ข€ ์ •๋ฆฌํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ–๊ณ  ๊ทธ๋ฆฌ๊ณ  react hooks๋„ ์‚ดํŽด๋ณด๊ธฐ๋กœ ํ•œ๋‹ค. ์ด๋ ‡๊ฒŒ ๊ฐ€๋Š”๊ฒŒ ๋งž๋‚˜ ์‹ถ์ง€๋งŒ ์–ด์ฐŒ ํ•˜๊ฒ ๋Š”๊ฐ€ ๊ทธ๋ƒฅ ์‰ฌ์ง€์•Š๊ณ  ๋‹ฌ๋ฆฌ๋ฉด ๊ฒฐ์Šน์ ์ด ์žˆ๊ฒ ์ง€๋ผ๋Š” ๋งˆ์Œ์œผ๋กœ 7์ฃผ์ฐจ๋ฅผ ๋งˆ์นœ๋‹ค.

๐ŸŒง ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ…

์ฒซ๋ฒˆ์งธ, useNavigate() ๋ฅผ ์ฝ”๋“œ์— ์ ์šฉ์‹œํ‚ค์ง€ ๋ชปํ•œ์ ...๋Šฆ๊ฒŒ์„œ ํ•˜๊ธด ํ–ˆ์ง€๋งŒ ์™œ์ด๋ฆฌ ์‘์šฉ๋ ฅ์ด ๋–จ์–ด์ง€๋Š”์ง€..๋ณด๊ณ ์น˜๋Š” ์ฝ”๋“œ์˜ ๋ถ€์ž‘์šฉ๊ฐ™์€ ๋Š๋‚Œ. ๋’ค๋กœ๊ฐ€๊ธฐ๋ฅผ ์–ด๋–ป๊ฒŒ ์ ์šฉํ–ˆ์ง€๋งŒ ์„น์…˜ ๋•Œ ์–ด๋ž!! ์•ž์œผ๋กœ ๊ฐ€๊ธฐ ๋’ค๋กœ๊ฐ€๊ธฐ๋„ ํ•˜์‹œ๊ณ  ์ฝ”๋“œ๋„ ๋” ์งง๊ฒŒ ํ•˜์‹  ์ฝ”๋“œ๋ณด๊ณ  ํ˜„ํƒ€๊ฐ€ ์™”๋‹ค. ์ข€ ๋” ํฌ๊ด„์ ์œผ๋กœ ์ƒ๊ฐํ•˜๊ณ  ์—ฌ๋Ÿฌ๋ฒˆ ์‹œํ–‰์ฐฉ์˜ค๋ฅผ ๋Š๊ปด๋ณด๋ฉด์„œ ๋…ธ๋ ฅ ๋” ํ•ด๋ณผ๊ฑธ...๋ง‰์—ฐํžˆ ๊ณผ์ œ ์ˆ˜ํ–‰์—๋งŒ ํž˜์„ ์‹ค์—ˆ๋‚˜๋ณด๋‹ค.
๋‘๋ฒˆ์งธ, localStorage์— userData ๋‹ด๊ธฐ ๊ณผ์ œ ๋„์ „์„ ์•„์˜ˆ ํฌ๊ธฐํ•œ๊ฒŒ ์•„์‰ฝ๋‹ค. ๊ณผ์ œ ์ˆ˜ํ–‰ํ›„ ์–ด๋“œ๋ฒค์„œ๋กœ ํ• ์ง€๋ง์ง€ ๊ณ ๋ฏผํ•˜๋˜ ์ค‘ ๋ฐฐ์šด๊ฒƒ์„ ๋ณต์Šตํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์กŒ๋‹ค. ๊ทผ๋ฐ ๊ทธ ์‹œ๊ฐ„์— ํ•œ๋ฒˆ localStorage ์— ๋Œ€ํ•ด ์ฐพ์•„๋ณด๊ณ  ๊ณต๋ถ€๋ฅผ ํ–ˆ์œผ๋ฉด ์–ผ๋งˆ๋‚˜ ์ข‹์•˜์„๊นŒ? ์ฐจ๋ ค์ง„ ๋ฐฅ์ƒ์— ์ˆŸ๊ฐ€๋ฝ ์–ป๊ธฐ ๋ณด๋‹ค๋Š” ๋‚ด๊ฐ€ ์ฐพ์•„๊ฐ€์„œ ๋จน์—ˆ๋”๋ผ๋ฉด ๋จธ๋ฆฟ์†์— ์˜ค๋ž˜ ์žฅ๊ธฐ ๊ธฐ์–ต์œผ๋กœ ๋‚จ์•˜์„ ๊ฒƒ์ด๊ณ  ์—ฌ๋Ÿฌ๋ฒˆ ์‹œํ–‰์ฐฉ์˜ค๋กœ ๋‚ด๊ฒƒ์œผ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๊ธฐํšŒ๋ฅผ ๋†“์นœ๊ฒƒ ๊ฐ™์•˜๋‹ค. ์ž๊พธ ์‰ฌ์šด๊ธธ ์ง€๋ฆ„๊ธธ๋กœ ๊ฐ€๋ ค๋Š” ๋งˆ์Œ์ด ์ด๋ ‡๊ฒŒ ์ˆœ๊ฐ„์ˆœ๊ฐ„ ๋ฒฝ์„ ๋Š๊ปด์ง€๋Š” ์š”์ฆ˜...์˜ค๋Š˜์ด์—ฌ์„œ ๋งŽ์€ ๋ฐ˜์„ฑ์„ ํ•˜๊ฒŒ ๋œ๋‹ค.

profile
์‹ค์ˆ˜๋ฅผ ๋‘๋ ค์›Œ ๋ง๊ณ  ๊ณ„์† ๋„์ „ ํ•˜๋Š” ๊ฐœ๋ฐœ์ž์˜ ์—ฌ์ •!

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