์๋ฐ์คํฌ๋ฆฝํธ
-
useState, ํด๋ก์ ๋ฅผ ํ์ฉํ์ฌ ๋์ํ๋ค๊ณ ?TECH 2024. 1. 27. 21:48
์ด๋ฒ ํฌ์คํ ์์๋ ํด๋ก์ ์ ๋ํด์ ๊ฐ๋จํ ์์๋ณด๊ณ , ํด๋ก์ ๊ฐ ํ์ฉ๋๋ ์์ ์ค ํ๋์ธ useState์ ๋ด๋ถ ๋์ ๋ฐฉ์์ ์์ธํ ์์๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค. โ๏ธ ํด๋ก์ ๋? ํจ์ํ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์์ ์ฌ์ฉ๋๋ ์ค์ํ ํน์ฑ ์ค ํ๋๋ก, ํจ์์ ๊ทธ ํจ์๊ฐ ์ ์ธ๋ ๋ ์์ปฌ ํ๊ฒฝ๊ณผ์ ์กฐํฉ์ ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ ์์ปฌ ์ค์ฝํ๋ฅผ ๋ฐ๋ฅด๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ด๊ธฐ ๋๋ฌธ์ ๋ฐ์ํ๋ ํ์์ ๋๋ค. W3C School์์๋ ํด๋ก์ ๋ฅผ ํจ์๊ฐ privateํ ๋ณ์๋ฅผ ์ฌ์ฉํ ์ ์๋๋ก ํ๋ค๊ณ ์ค๋ช ํฉ๋๋ค. ์ด ์ค๋ช ์ด ํด๋ก์ ์ ๊ธฐ๋ฅ์ ์ฝ๊ฒ ์ดํดํ๋ ๋ฐ ๋์์ด ๋์์ต๋๋ค. ์ฌ๊ธฐ์ ๋ ์์ปฌ ์ค์ฝํ๋? ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ํจ์๊ฐ ํธ์ถ๋๋ ์์น๊ฐ ์๋ ํจ์๋ฅผ ์ด๋์ ์ ์ํ๋์ง์ ๋ฐ๋ผ ํจ์์ ์์ ์ค์ฝํ๋ฅผ ๊ฒฐ์ ํฉ๋๋ค. ์์ ์ค์ฝํ์ ๋ํ ์ฐธ์กฐ๋ ํจ์ ์ ์๊ฐ..
-
[JavaScript] ๋ ๋์ ๋น๋๊ธฐ ํต์TECH 2022. 3. 27. 15:02
ํ๋ฆฌ์จ๋ณด๋ฉ ํ์๋ค๊ณผ ํจ๊ป ๋ฉด์ ์คํฐ๋๋ฅผ ์์ํ๋ค! ์ด๋ฒ ์ฃผ ์ฃผ์ ์ค ํ๋์ธ Promise, callback hell, async/await, fetch ๋ฑ์ ๋ํด ์์ธํ ์์๋ณด๋ ์๊ฐ์ ๊ฐ์ก๋ค. API๋ฅผ ํตํด ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ฌ ๋ async/await๋ fetch๋ฅผ ์ฌ์ฉํ๋ฉด์๋ ๋ด๋ถ์ ์ผ๋ก ์ด๋ป๊ฒ ๋์ํ๋์ง๋ ์ ๋ชจ๋ฅด๊ณ ์์๋๋ฐ ์ด๋ฒ ๊ธฐํ์ ๋ด๋ถ ๋์์ด ์ด๋ป๊ฒ ์ด๋ฃจ์ด์ง๋์ง ๊ณต๋ถํด ๋ณผ ์ ์์๋ค. ๊ทธ๋ผ ๋ฐ๋ก ์์~ โ๏ธ ์ฝ๋ฐฑ ํจ์ ํจ์์ ๋งค๊ฐ๋ณ์๋ฅผ ํตํด ๋ค๋ฅธ ํจ์์ ๋ด๋ถ๋ก ์ ๋ฌ๋๋ ํจ์๋ฅผ ์ฝ๋ฐฑ ํจ์(callback function)๋ผ๊ณ ํ๋ค. ๋งค๊ฐ๋ณ์๋ฅผ ํตํด ํจ์์ ์ธ๋ถ์์ ์ฝ๋ฐฑ ํจ์๋ฅผ ์ ๋ฌ๋ฐ์ ํจ์๋ ๊ณ ์ฐจ ํจ์(Higher-Order Function, HOF)๋ผ๊ณ ํ๋ค. ํน์ ์์ ์ n ๋ฒ ๋ฐ๋ณต์ํค๋ ํจ์๊ฐ..
-
[React] Redux ๊ฐ๋ ์ ๋ฆฌTECH 2022. 3. 13. 02:04
โ๏ธ Redux๋? Redux๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค. ์ํ(state)๋ฅผ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์๋๋ก ๋์์ฃผ๋ ๋๊ตฌ ์ค ํ๋์ด๋ค. โ๏ธ Redux ๊ธฐ๋ณธ ๊ฐ๋ 1. ์ก์ (Action) ์ํ๋ฅผ ๋ณ๊ฒฝํ๊ธฐ ์ํด์๋ ์ก์ ์ ํตํด ๋ณ๊ฒฝํด์ผ ํ๋ค. ์ก์ ์ ๊ฐ์ฒด ํ์์ผ๋ก ํํ๋๊ณ , type์ ํ์๋ก ๊ฐ์ง๊ณ ์์ด์ผ ํ๋ค. ์ต์ ์ผ๋ก ๋ค๋ฅธ ํ๋กํผํฐ๋ฅผ ๊ฐ์ง ์ ์๊ณ , ์ก์ ์ ํ์ํ ๋ถ๊ฐ์ ์ธ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ ๋ ์ฃผ๋ก ์ฌ์ฉํ๋ค. { type: 'ADD_MESSAGE', data: { id: 1 message: "๋ฆฌ๋์ค ๋ฐฐ์ฐ๊ธฐ" } } ๋ฉ์์ง๋ฅผ ์๋ก ์ถ๊ฐํ๋ ์ก์ ์ด๊ณ , ์๋ก์ด ๋ฉ์์ง์ ๋ํ ๋ถ๊ฐ์ ์ธ data๊ฐ ์ ๋ฌ๋๋ค. 2. ์ก์ ์์ฑ ํจ์(Action Creator) ์ก์ ์ ๊ฐ์ฒด ํ์์ผ๋ก ๋ฐ๋ก ๋ง๋๋ ๊ฒ์ด ์๋..