1.React Spa
2. React Twittler State & Props
3. ussState
4. state, Props
5. ์ด๋ฒคํธ ํธ๋ค๋ฌ
์ค ์ฐํด ๋๋๊ณ ๋ฐ๋ก ๊ณผ์ ๋ฅผ ์์ํจ์ ์์ด ํผ๋ก๋์ ๊ณผ ์ปจ๋์ ํ๋ณต && ๋๋ ํ์ ์ด ๋์ง ์๊ณ ์๋ค. ๊ณผ์ ๋ ํด์ผํ๋๊น ๋ฌต๋ฌตํ ๋ ธํธ๋ถ์ ์์ ํด๋๊ฐ๊ณ ์์๋ฏผ ๋จธ๋ฆฟ์์ ์ ํ ๋ค์ด์ค์ง ์๋๋ค. ๊ณผ์ ๋ ๋ฌต๋ฌตํ ์ํ์ ํ์ง๋ง ๋ญ๊ฐ ํผ์ฆ ๋ง์ถ๋ฏ์ด ๋น์นธ์ ๋ฉ๊พธ์ด๋๊ฐ๋ ๋๋..๋ด์ค์ค๋ก ์ฝ๋๋ฅผ ์ง ๊ฒ ์๋๋ผ ์ด๊ฒ ์ด๋ฐ์์ผ๋ก ํ๋ฌ๊ฐ๋๊ฑฐ ์๊ฒ ์ง๋ง ๋์ค์ ๋ํผ์ ์ด์ฝ๋๋ฅผ ์งค ์ ์์ ๊น ํ๋ ์๋ฌธ์ด ์๊พธ ๋ค์๋ค. ๋ฌผ๋ก ์์ฆ ๋งค์ผ ํํํ ๊ฐ์ ์๊ณ ์ถ์ง ์๊ณ ํด์ ์์๊ฑฐ ํ๊ณ ์์ง๋ง ๊ทธ๋๋ ๋งค์ผ ์๊ฐ ๋๋ ต๋ค. ๊ทธ๋์ ์ค๋์ ๋ฐฐ์ด ๋ด์ฉ ์ข ์ ๋ฆฌํ๋ ์๊ฐ์ ๊ฐ๊ณ ๊ทธ๋ฆฌ๊ณ react hooks๋ ์ดํด๋ณด๊ธฐ๋ก ํ๋ค. ์ด๋ ๊ฒ ๊ฐ๋๊ฒ ๋ง๋ ์ถ์ง๋ง ์ด์ฐ ํ๊ฒ ๋๊ฐ ๊ทธ๋ฅ ์ฌ์ง์๊ณ ๋ฌ๋ฆฌ๋ฉด ๊ฒฐ์น์ ์ด ์๊ฒ ์ง๋ผ๋ ๋ง์์ผ๋ก 7์ฃผ์ฐจ๋ฅผ ๋ง์น๋ค.
์ฒซ๋ฒ์งธ, useNavigate() ๋ฅผ ์ฝ๋์ ์ ์ฉ์ํค์ง ๋ชปํ์ ...๋ฆ๊ฒ์ ํ๊ธด ํ์ง๋ง ์์ด๋ฆฌ ์์ฉ๋ ฅ์ด ๋จ์ด์ง๋์ง..๋ณด๊ณ ์น๋ ์ฝ๋์ ๋ถ์์ฉ๊ฐ์ ๋๋. ๋ค๋ก๊ฐ๊ธฐ๋ฅผ ์ด๋ป๊ฒ ์ ์ฉํ์ง๋ง ์น์ ๋ ์ด๋!! ์์ผ๋ก ๊ฐ๊ธฐ ๋ค๋ก๊ฐ๊ธฐ๋ ํ์๊ณ ์ฝ๋๋ ๋ ์งง๊ฒ ํ์ ์ฝ๋๋ณด๊ณ ํํ๊ฐ ์๋ค. ์ข ๋ ํฌ๊ด์ ์ผ๋ก ์๊ฐํ๊ณ ์ฌ๋ฌ๋ฒ ์ํ์ฐฉ์ค๋ฅผ ๋๊ปด๋ณด๋ฉด์ ๋ ธ๋ ฅ ๋ ํด๋ณผ๊ฑธ...๋ง์ฐํ ๊ณผ์ ์ํ์๋ง ํ์ ์ค์๋๋ณด๋ค.
๋๋ฒ์งธ, localStorage์ userData ๋ด๊ธฐ ๊ณผ์ ๋์ ์ ์์ ํฌ๊ธฐํ๊ฒ ์์ฝ๋ค. ๊ณผ์ ์ํํ ์ด๋๋ฒค์๋ก ํ ์ง๋ง์ง ๊ณ ๋ฏผํ๋ ์ค ๋ฐฐ์ด๊ฒ์ ๋ณต์ตํ๋ ์๊ฐ์ ๊ฐ์ก๋ค. ๊ทผ๋ฐ ๊ทธ ์๊ฐ์ ํ๋ฒ localStorage ์ ๋ํด ์ฐพ์๋ณด๊ณ ๊ณต๋ถ๋ฅผ ํ์ผ๋ฉด ์ผ๋ง๋ ์ข์์๊น? ์ฐจ๋ ค์ง ๋ฐฅ์์ ์๊ฐ๋ฝ ์ป๊ธฐ ๋ณด๋ค๋ ๋ด๊ฐ ์ฐพ์๊ฐ์ ๋จน์๋๋ผ๋ฉด ๋จธ๋ฆฟ์์ ์ค๋ ์ฅ๊ธฐ ๊ธฐ์ต์ผ๋ก ๋จ์์ ๊ฒ์ด๊ณ ์ฌ๋ฌ๋ฒ ์ํ์ฐฉ์ค๋ก ๋ด๊ฒ์ผ๋ก ๋ง๋ค ์ ์๋ ๊ธฐํ๋ฅผ ๋์น๊ฒ ๊ฐ์๋ค. ์๊พธ ์ฌ์ด๊ธธ ์ง๋ฆ๊ธธ๋ก ๊ฐ๋ ค๋ ๋ง์์ด ์ด๋ ๊ฒ ์๊ฐ์๊ฐ ๋ฒฝ์ ๋๊ปด์ง๋ ์์ฆ...์ค๋์ด์ฌ์ ๋ง์ ๋ฐ์ฑ์ ํ๊ฒ ๋๋ค.