๋ชจ๋ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ ์ค ๊ฐ์ฅ ์ธ๊ธฐ์๋ React(๋ฆฌ์กํธ), ํ์ง๋ง ๋ฐฐ์ฐ๊ธฐ๊ฐ ์ด๋ ต์ต๋๋ค. ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ํ (Hook)์ด ๋์์ต๋๋ค. ๋ณธ ๊ฐ์๋ ํ ์ ์ด์ฉํด React๋ฅผ ์ฝ๊ฒ ๋ฐฐ์ธ ์ ์๋๋ก ๋์๋๋ฆฝ๋๋ค.
React ๊ธฐ์ด
React Hook ์ฌ์ฉ๋ฒ
ํ ์ผ ๊ด๋ฆฌ ์น ์ฑ ๊ฐ๋ฐโ
๋ก
์ฝ๊ณ ์ฌ๋ฏธ์๊ฒ ๋ฐฐ์ฐ๋ ๋ฆฌ์กํธ ํ
!
ํ
(Hook)์ด๋, ํจ์ํ ์ปดํฌ๋ํธ์์๋
ํด๋์คํ ์ปดํฌ๋ํธ์ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๋๋ก
React 16.8 ๋ฒ์ ๋ถํฐ ๋์
๋ ๊ธฐ๋ฅ์
๋๋ค.
ํ์ฌ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ ์ค ๊ฐ์ฅ ์ธ๊ธฐ์๋ ํ๋ ์์ํฌ, ๋ฆฌ์กํธ์์ ์ต๊ทผ ํจ์ํ ๊ฐ๋ฐ ๋ฐฉ๋ฒ์ ๊ฐ๋ฅํ๊ฒ ๋ง๋ค์ด์ฃผ๋ ํ ์ ๋ฐํํ์ต๋๋ค. ํ ์ ์ด์ฉํ๋ฉด ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๋ก์ง์ ์ฝ๊ฒ ๋ง๋ค ์ ์๊ณ , ๋ณด๋ค ๊ฐํธํ๊ฒ ๊ธฐ๋ฅ์ ๊ตฌํํ ์ ์์ต๋๋ค.
๋ณธ ๊ฐ์์์๋ ๋ฆฌ์กํธ ํ (React Hook)์ผ๋ก ํ ์ผ ๊ด๋ฆฌ(To-do List) ์น์ฑ์ ๋ง๋ค์ด ๋ด ๋๋ค. ์๋์ ๊ฐ์ ํ ์ผ๊ด๋ฆฌ์ฑ์ ํ ์ ํตํด ํจ์ํ ๊ฐ๋ฐ ๋ฐฉ์์ผ๋ก ๊ฐ๋ฐํ ์ ์์ต๋๋ค.
๋ฆฌ์กํธ ํ
(React Hook)์ผ๋ก ์์ ๊ฐ์ ํ ์ผ ๊ด๋ฆฌ ์ฑ์ ๊ฐ๋ฐํ ์ ์์ต๋๋ค. (๋ฐ๋ก๊ฐ๊ธฐ)
๊ธฐ๋ณธ์ ์ถฉ์คํ ์ค๋ช
์ผ๋ก
์ด๋ณด์๋ ์ฝ๊ฒ
๋ฐ๋ผํ ์ ์์ด์.
์ค์ ๋ก ๋ฆฌ์กํธ ํ
์ด
์น์ฑ ๊ฐ๋ฐ ๊ณผ์ ์์
์ด๋ป๊ฒ ์ฐ์ด๋์ง ๋ฐฐ์์.
์ฝ๊ณ ๊ฐ๋จํ
๊ฐ๋ฐํ๊ฒฝ ์ค์ ์ ์ํ
CodePen์ ์ฌ์ฉํด์.
๋ฆฌ์กํธ ๊ฐ๋ฐ ์ ์ฒด๋ฅผ
๊ฒฝํํ ์ ์๋
์์ ๋ฅผ ๋ง๋ค์ด๋ด
๋๋ค.
Q. ๋ฆฌ์กํธ๋ฅผ ์์์ผ ๋ค์ ์ ์๋์?
๋ณธ ๊ฐ์๋ ๋ฆฌ์กํธ ๊ธฐ์ด๋ฅผ ๋ค๋ฃน๋๋ค. ์ค๋ช ์ ๋์ดํ๋ ๋์ ์์ฃผ ๊ฐ๋จํ ์น์ฑ์ ์ง์ ๊ฐ๋ฐํด๋ณด๋ฉด์ ๋ฆฌ์กํธ์ ๊ธฐ๋ฅ์ ํ์ ํ ์ ์๊ฒ ๋ง๋ค์์ต๋๋ค.
Q. ์๊ฐ ํ, ๋ฆฌ์กํธ์ ๋ํด ์ผ๋ง๋ ์ ์ ์์๊น์?
๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ต ๋ฒ์๋ ํฌ๊ฒ 3๊ฐ์ง๋ก ๋๋ ์ ์์ต๋๋ค. 1) ๋์ UI, 2) Router๋ฅผ ํตํ ํ์ด์ง ์ด๋, 3) ์๋ฒ์ ํต์ ์ ๋๋ค. ๋ณธ ๊ฐ์์์๋ ์ด ์ค์์ โ๋์ UIโ๋ฅผ ๋ฐฐ์ธ ์ ์์ต๋๋ค.
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ณธ๊ธฐ๊ฐ ์์ผ์ ๋ถ
์ฌ์ด React ๊ฐ๋ฐ ๋ฐฉ๋ฒ์ ์๊ณ ์ถ์ ๋ถ
React Hook ์ ๋ฐฐ์ฐ๊ณ ์ถ์ ๋ถ
์ ์ ์ง์,
ํ์ํ ๊น์?
์๋ฐ์คํฌ๋ฆฝํธ
HTML
4,881
๋ช
์๊ฐ์
112
๊ฐ
์๊ฐํ
29
๊ฐ
๋ต๋ณ
3.7
์
๊ฐ์ ํ์
9
๊ฐ
๊ฐ์
์ ์ฒด
17๊ฐ โ (1์๊ฐ 47๋ถ)
๊ฐ์ ์๊ฐ
02:26
๊ฐ๋ฐ ํ๊ฒฝ
10:59
Input ์์ ์ถ๊ฐ
09:20
useState
06:30
์คํ์ผ ๋ณ๊ฒฝ
05:20
clickHandler ์ถ๊ฐ
10:35
useContext ์๊ฐ
07:07
useContext ๊ตฌํ
10:30
๋ง์น๋ฉฐ ...
00:31