230905(ํ)
๐ค ์ฑ์ฅ์ผ์ง 7.0
์ฑ
ํ๋ณตํ ์ด๊ธฐ์ฃผ์์(์จ์ธ ๋ค์ด์ด)
์ ๋ด์ฉ์ ์๊ทน๋ฐ์ ์์ํ๋ ์๋ฐํ ์ฑ์ฅ๊ธฐ๋ก
์ด์์๋ ๊ฝ๊ณผ ์ฃฝ์ ๊ฝ์ ์ด๋ป๊ฒ ๊ตฌ๋ณํ๋๊ฐ?
์ฑ์ฅํ๊ณ ์๋ ๊ฒ์ด ์ด์ ์๋ ๊ฒ์ด๋ค.
์๋ช ์ ์ ์ผํ ์ฆ๊ฑฐ๋ ์ฑ์ฅ์ด๋ค!
โ (7.0)<์์ ๊ฐํธ>
ํ์ธ๋ง ํ์ต๋ฒ
์ ์๊ฒ ๋๋งํผ, ์ฑ์ฅ์ผ์ง๋ ์ ๋ง ๊ทธ ๋ ์ ํค์๋ ์ค์ฌ์ผ๋ก ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํ๋๋ก ํ๋ค.
โ๏ธ ํค์๋: ์ง๊ด์ ์ด๊ณ ์ฝ๊ณ ๊ฐ๋จํ๊ฒ ์์ฑ
React: Context API
๊ทธ๋์ ๊ทธ๋ฅ ๋ง์ฐํ๊ฒ Context API๋ฅผ ์ํ ๊ด๋ฆฌ
์ ์์ฐ์ค๋ฝ๊ฒ ์ฐ๊ด์ง์ด์ ์๊ฐํ์๋ค. ํ๋ฐ ์ค๋ ์ธ์
์ ๋ฃ๊ณ ์ ์ Context API์ธ์ง, ์ด๋ค ์ํฉ์์ Context API๋ฅผ ์ฌ์ฉํ๋ ๊ฒ ์ ์ ํ์ง, ๊ทธ๋ฆฌ๊ณ ์ค์ Context๋ฅผ ์ด๋ป๊ฒ ๋ถ๋ฆฌํ๊ณ ๊ฐ๊ฐ์ ๊ด๋ฆฌํ๋ ๊ฒ ์ข์์ง ์๊ฒ ๋์๋ค. ์ผ๋จ ๋ค๋ฅธ ์ปดํฌ๋ํธ์๊ฒ ๋ฌธ๋งฅ์ ์ ๋ฌํ๋ค๋ ์๋ฏธ์์ Context API๋ผ๋ ๊ฒ ์ถฉ๊ฒฉโฆ ๋ง๋ถ์ฌ
Context API์ useState ํน์ useReducer๋ฅผ ๊ฐ์ด ์ฌ์ฉํ๋ฉด ์ด์ ์์ผ ์ ์ญ ์ํ ๊ด๋ฆฌ
์ ์ญํ ์ ์ํํ ์ ์๊ฒ ๋๋ค.
MSW์ ์๋ฆฌ
ํ๋ก์ ํธ ์งํ ์ค, ์ ๊ณต๋๋ ์๋ฒ ๋ ํฌ๋ฅผ ํด๋ก ํด์ ๋ค๋ฅธ ํฌํธ์ ์ฌ๋ ค๋๊ณ api ํต์ ์ ํ๋ ๊ฒ ๋๋ฌด ๊ท์ฐฎ์์ ์ด์ ์ ์ฌ์ฉํด๋ณด๊ณ ์ถ์๋ MSW๋ฅผ ์ฌ์ฉํด๋ดค๋ค. ์ฌ์ค ๊ทธ๋์ Node๋ Express๋ก ๊ตฌํํ ์๋ฒ์ ํฌ๊ฒ ๋ค๋ฅด์ง ์๋ค๊ณ ๋๊ผ๋๋ฐ ๊ทธ ์๋ฆฌ ์์ฒด๊ฐ ์ฐจ์ด๊ฐ ํฐ ๊ฒ ๊ฐ๋ค. ์ผ๋จ ํ๋ก ํธ์๋๋จ์ ํ๋ก์ ํธ์์ ํต์ ์ ๊ฐ๋ก์ฑ์ ์๋ต์ ํ๋ ๋ฐฉ์์ด๋ผ๋ ๊ฒ ์ฐธ ํฅ๋ฏธ๋ก์ ๋ค. ๋, ์ด์ ๋ํ ํ ์คํ ๊น์ง ๊ฐ๋ฅํ๋ค๋โฆ ๊ทธ๋ฅ ๊ฐ๋จํ ์๋ฒ์ api๋ฅผ ๊ตฌํํ๋ ๊ฒ๋ ๋๋ฌด ์ข์ง๋ง, msw๋ฅผ ์ฌ์ฉํ๋ฉด ์ด๋์ ๋ ์๋ฒ api ์ง๋ ๊ฒฝํ๋ ํ๋ฉด์ ๊ฐ๋ฐ ์๋์๋ ๋์์ด ๋ ๊ฒ ๊ฐ๋ค.
๐ ํ๊ณ
์ค๋ ๋ฐฐ์ด ์์กด์ฑ๋ถํฐ ํก๋จ ๊ด์ฌ์ฌ, ๊ทธ๋ฆฌ๊ณ ์์ง๋ ์กฐ๊ธ ํท๊ฐ๋ฆฌ๋ ๋ฉ๋ชจ์ด์ ์ด์ โฆ ๊ฐ๋ ๋ค์ ์๊ฒ ๋๋ฐ ์ด๋ฅผ ์ด๋ป๊ฒ ์ฝ๋์ ์ ์ฉํ๊ณ ๋ น์ผ์ง๊ฐ ์ฐธ ์ฝ์ง ์์ ๊ฒ ๊ฐ๋ค. ๊ทธ๋๋ ์ค๋ ํ๋ก์ ํธํ๋ฉด์ ์ด์ ์ฌ๋งํ ํ๋ก์ ํธ ๊ตฌ์ฑ์ ์ฐฉ์ฐฉ ํ๋ ๊ฒ ๊ฐ์์ ๊ธฐ๋ถ์ด ์ข๋ค! :) UI์ ์ปค์คํ ํ ๋ค์ ์ด๋์ ๋ ๊ตฌํํ์ผ๋, ๋ด์ผ ๋๋์ด Query์ ๊ฐ์ ์บ์ฑ์ฒ๋ฆฌ์ ์๊ฐ์ ๋ง์ด ์์๋ด์ผ์ง!