[ํญํด99 - 6์ฃผ์ฐจ] ์ฃผํน๊ธฐ ์ฌํ - React
โ ํญํด99 - 6์ฃผ์ฐจ ํ๊ณ ๋ก (์ฃผํน๊ธฐ ์ฌํ)
๋ฒ์จ ์ฃผํน๊ธฐ-์ฌํ ์ฃผ์ฐจ๋ฅผ ๋์ผ๋ก ์ฃผํน๊ธฐ ์ฃผ์ฐจ๊ฐ ๋๋ฌ๋ค.
์ฃผํน๊ธฐ ์ฃผ์ฐจ๊ฐ ๋๋๊ณ ์ด์ ๋ฐ๋ก ๋ฐฑ์๋ ํํธ์ ํ์ ์ ํ๋
์ฃผํน๊ธฐ ๋ฏธ๋ ํ๋ก์ ํธ ์ฃผ์ฐจ๊ฐ ์์๋๋ค.
์ฃผํน๊ธฐ ์ฌํ ์ฃผ์ฐจ์์๋ 'toolkit, thunk, axios'๋ฅผ ์ฌ์ฉํด์ todolist๋ฅผ ๋ง๋ค์๋๋ฐ
ํต์ฌ์ '๋ฏธ๋ค์จ์ด๋ฅผ ํตํ ๋น๋๊ธฐ ์์ ์ฒ๋ฆฌ'์๋ค.
redux-thunk๋ฅผ ๊ฐ๋จํ ์ค๋ช ํ๋ฉด
๋ฆฌ๋์ค์์๋ ๊ธฐ๋ณธ์ ์ผ๋ก๋ ์ก์ ๊ฐ์ฒด๋ฅผ ๋์คํจ์น ํ๋๋ฐ
redux-thunk๋ ๊ฐ์ฒด ๋์ ํจ์๋ฅผ ์์ฑํ๋ ์ก์ ์์ฑํจ์๋ฅผ ์์ฑ ํ ์ ์๊ฒ ํด์ฃผ๋ ๋ฏธ๋ค์จ์ด๋ค.
(์์ธํ ๋ด์ฉ์ redux-thunk ํฌ์คํ ์ ๊ธฐ๋ํด์ฃผ์ธ์!)
3์ฃผ์ ๊ฑธ์น ์ฃผํน๊ธฐ ์ฃผ์ฐจ์์๋
๊ธฐ์ด: react
์๋ จ: react-redux
์ฌํ: toolkit, thunk, axios
๋ฅผ ๋ฐฐ์ฐ๊ณ ์ค์ต์ ํ๋๋ฐ 3์ฃผ๋์ ๋ฆฌ์กํธ์ ๊ธฐ์ด๋ฅผ ์ดํดํ ์ ์๊ฒ ๋์๊ณ
๋ฆฌ์กํธ๋ก ํ์ฌ ์ฃผํน๊ธฐ ๋ฏธ๋ ํ๋ก์ ํธ๋ ์งํํ ์ ์๊ฒ ๋์๋ค.
๋ฌผ๋ก ์์ง์ ์ฌ๊ธฐ์ ๊ธฐ ์ฐธ๊ณ ํ๋ฉด์ ๊ฐ๋ฐํ๋ ์ค์ด์ง๋ง
์ฐธ๊ณ ํ๋ฉด์ ๊ฐ๋ฐํ ์ ์์ ์ ๋๊ฐ ๋์๋ค๋ ๊ฒ ์ค์ํ๋ค! ๐๐
๊ธฐ์ด> ์๋ จ> ์ฌํ ์ฃผ์ฐจ๋ก ๊ฐ ์๋ก
๋ ๋ง์ ๊ธฐ๋ฅ๋ค์ ๊ฐ์ํํด์ ์ฌ์ฉํ ์ ์๊ฒ๋ ๋ฐฐ์ฐ๊ณ ์ค์ตํ๋๋ฐ
๋ฌธ๋ฒ์ด ๊ฐ์ํ ๋์๋ค๊ณ ํด์ ๋ฐฐ์์ ์๋๋ ๊ฐ์ํ ๋๋ ๊ฒ์ ์๋์๋ค! ใ ใ ใ ใ ใ ใ
์ต์ํด์ง๊ธฐ ์ ๊น์ง๋ ๋ฌ๋์ปค๋ธ๋ผ๋ ๊ฒ์ ํญ์ ์กด์ฌํ๋ค!
์ด๋์ ๋ ์ต์ํด์ง๋ฉด ํ์คํ ๊ทธ๊ฒ๋ค์ ์ฌ์ฉํ๋ ์ด์ ๋ค์ ์๊ฒ ๋๋ค.
์ง๊ธ๋ ์ฌ์ฉํ๋ฉด์ ์กฐ๊ธ์ฉ ๋ ์ดํด๊ฐ ๋๊ธฐ ์์ํ๊ณ ์๊ณ ,
๋จ์ ํ๋ก์ ํธ๋ค์ ๋ ์งํํ๋ค๋ณด๋ฉด ๋ ๋ง์ด ์๊ฒ ๋๊ฒ ์ง!
์ง๊ธ ์งํ์ค์ธ ์ฃผํน๊ธฐ ๋ฏธ๋ ํ๋ก์ ํธ์์๋
node.js ๋ถ๋ค๊ณผ ํ์ ์ค์ธ๋ฐ 3์ฃผ๋์ ๋ฐฐ์ด ๊ฒ๋ค๋ก ํ์ ์ ์งํ ์ค์ด๋ค.
์ผ๋ฅธ ์จ๋จน์ผ๋ฌ ๊ฐ์ผ์ง!!
๊ฐ๋ณด์๊ณ ~!
๐ก axios
๋ฆฌ์กํธ์์ ์๋ฒํต์ ํ ๋ ์ฌ์ฉํ๋ axios์ ๋ํ ๊ธ์ ์์ฑํ๊ณ ,
์๋ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํด์ฃผ์ธ์!
React] axios ๋? axios ์ฌ์ฉ๋ฒ and ๋น๋๊ธฐ
๐ axios ๋? and ๋น๋๊ธฐ โ ๋๊ธฐ์ ๋น๋๊ธฐ 1. ๋๊ธฐ (synchronous: ๋์์ ์ผ์ด๋๋) ์์ฒญ๊ณผ ๊ฒฐ๊ณผ๊ฐ ๋์์ ์ผ์ด๋๋ค๋ ์๋ฏธ. ์์ฒญ์ ํ๋ฉด ์๊ฐ์ด ๊ฑธ๋ฆฌ๋๋ผ๋ ์์ฒญํ ์๋ฆฌ์์ ๊ฒฐ๊ณผ๊ฐ ์ถ๋ ฅ๋์ด์ผ ํ๋ค.
iotrue.tistory.com