ย
1.1 Hook์ด๋?1.1.1 Hook์ ์ ์1.1.2 Hook์ ์ข
๋ฅ1.2 Hook์ ํน์ง 1.2.1 ์ด์ ๋ฒ์ ๊ณผ์ ํธํ์ฑ 1.2.2 ์ ํ์ ์ฌ์ฉ 1.2.3 Class์ ํธํ์ฑ1.3 Hook์ ์ฌ์ฉ ๊ท์น 1.3.1 ์ค์ง React ํจ์ ๋ด์์ Hook์ ํธ์ถํด์ผ ํฉ๋๋ค.1.3.2 ์ต์์(at the top level)์์๋ง Hook์ ํธ์ถํด์ผ ํ๊ณ ํ
์ ํธ์ถํ๋ ์์๋ ํญ์ ๊ฐ์์ผ ํฉ๋๋ค.1.4 Hook์ ์ฌ์ฉํ๋ ์ด์ 1.4.1 Hook์ ํตํด ์ปดํฌ๋ํธ ๊ฐ ์ํ ๋ก์ง์ ์ฌ์ฌ์ฉ ํ ์ ์์ต๋๋ค.1.4.2 Hook์ ๊ตฌ์กฐ๋ฅผ ์ดํดํ๊ธฐ ์ฝ์ต๋๋ค.1.4.3 Hook์ ํด๋์ค ์ปดํฌ๋ํธ ์์ด React๋ฅผ ์ฌ์ฉ ๊ฐ๋ฅํ๊ฒ ๋ง๋ญ๋๋ค.
ย
1.1 Hook์ด๋?
1.1.1 Hook์ ์ ์
Hook์ ํจ์ ์ปดํฌ๋ํธ์์ ์ํ ๊ด๋ฆฌ์ ์๋ช
์ฃผ๊ธฐ ๊ธฐ๋ฅ(lifecycle features)์ ์ฐ๋(hook into)ํ ์ ์๊ฒ ํด์ฃผ๋ ํจ์์
๋๋ค.
ย
Hook์ React ๋ฒ์ 16.8๋ถํฐ ์๋ก ์ถ๊ฐ๋ ๊ธฐ๋ฅ์
๋๋ค. Hook์ ์ฌ์ฉํ๋ ค๋ฉด ๋ชจ๋ React ํจํค์ง(ex. React DOM)๊ฐ 16.8.0 ์ด์์ด์ผ ํฉ๋๋ค. ํจํค์ง๋ฅผ ๋ชจ๋ ์
๋ฐ์ดํธํ์ง ์์ผ๋ฉด Hook์ด ์๋ํ์ง ์์ต๋๋ค. Hook์ด ๋ฑ์ฅํ๊ณ ๊ฐ์ฅ ๋ฌ๋ผ์ง ์ ์, ํด๋์ค ์ปดํฌ๋ํธ์์๋ง ์ฌ์ฉํ ์ ์๋ ์ ์ฉํ ๊ธฐ๋ฅ๋ค์ ํจ์ ์ปดํฌ๋ํธ์์๋ ์ฌ์ฉํ ์ ์๊ฒ ๋์๋ค๋ ๊ฒ์
๋๋ค.
ย
ํจ์ ์ปดํฌ๋ํธ๋ ์ํ๋ฅผ ๊ฐ์ง ์ ์๊ณ , ๋ฉ์๋๋ฅผ ์ฌ์ฉํด ์๋ช
์ฃผ๊ธฐ๋ฅผ ๊ด๋ฆฌํ ์ ์์ต๋๋ค. ๊ทธ๋์ ๊ธฐ์กด์๋ ์ฝ๋์ ๋ณต์ก์ฑ๊ณผ ๋ฎ์ ์ฌ์ฌ์ฉ์ฑ ๋ฑ์ ์ฌ๋ฌ ๋ฌธ์ ์ ์๋ ๋ถ๊ตฌํ๊ณ ํด๋์ค ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํด์ผ๋ง ํ์ต๋๋ค. ํ์ง๋ง Hook์ด ๋ฑ์ฅํ๋ฉด์ ํจ์ ์ปดํฌ๋ํธ๋ฅผ ์ด์ฉํด ๋์ฑ ๊ฐ๊ฒฐํ๊ณ ํจ์จ์ ์ธ ์ฝ๋๋ก ์ํ ๊ด๋ฆฌ ๋ฐ ์๋ช
์ฃผ๊ธฐ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๊ฒ ๋์์ต๋๋ค.
ย
1.1.2 Hook์ ์ข ๋ฅ
React๋ย ๋ค์๊ณผ ๊ฐ์ ๋ด์ฅ Hook์ ์ ๊ณตํ๊ณ ์์ต๋๋ค.
ย
ย
- ๊ธฐ๋ณธ Hook์ ์ํ ๊ด๋ฆฌ์ ์๋ช ์ฃผ๊ธฐ ๊ธฐ๋ฅ์ ์ํด ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋ฉ๋๋ค.
- ์ถ๊ฐ Hook์ ๊ธฐ๋ณธ Hook์ ๋ณ๊ฒฝํ๊ฑฐ๋ ํน์ ํ ๊ฒฝ์ฐ์ ํ์์ ๋ฐ๋ผ ์ฌ์ฉํฉ๋๋ค.
- Hook ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์๋ ์ฌ๋ฌ ์ ์ฉํ ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ณ ์์ด Custom Hook์ ๋ง๋ค๊ธฐ ์ ์ ์ดํด๋ณด๊ธฐ ์ข์ต๋๋ค.
ย
์ด ์ธ์๋ Custom Hook์ด๋ผ๊ณ ๋ถ๋ฆฌ๋ ์์ ๋ง์ Hook์ ๋ง๋๋ ๊ฒ๋ ๊ฐ๋ฅํฉ๋๋ค. Custom Hook์ ๋ง๋ค๋ฉด ์ปดํฌ๋ํธ ๊ฐ์ ์ํ ๊ด๋ จ ๋ก์ง์ ํจ์๋ก ๋ฝ์๋ด์ด ์ฌ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ด๋ ์บก์ํ(capsulization)๋ผ๊ณ ๋ ํฉ๋๋ค.
ย
Hook์ ์ข
๋ฅ๋ ์ด์ฒ๋ผ ๋ค์ํ๊ณ , ์ด ์ฑ
์์ ํ๋์ฉ ์ฒ์ฒํ ๋ค๋ค๋ณผ ์์ ์
๋๋ค.
ย
1.2 Hook์ ํน์ง
1.2.1 ์ด์ ๋ฒ์ ๊ณผ์ ํธํ์ฑ
Hook์ ์ฌ์ฉ์ ์ด์ ๋ฒ์ ์ ์ฝ๋์ ์ถฉ๋์ ๋ฐ์์ํค์ง ์์ต๋๋ค. Hook์ React ์ด์ ๋ฒ์ ๊ณผ 100% ํธํ์ด ๋๊ธฐ ๋๋ฌธ์ ๊ธฐ์กด ์ฝ๋์ ๋ฌด๊ฒฐ์ฑ์ ํด์น์ง ์๊ณ ๋ ์ต์ ์ ์ฑ๋ฅ์ ๋ผ ์ ์์ต๋๋ค.
ย
1.2.2 ์ ํ์ ์ฌ์ฉ
Hook์ ๊ธฐ์กด์ ์ฝ๋ ๋ด์์ ํ์์ ๋ฐ๋ผ ์ ํ์ ์ผ๋ก ์ฌ์ฉํ ์ ์๋ค๋ ์ฅ์ ์ด ์์ต๋๋ค. ๊ธฐ์กด์ ์ฝ๋๋ฅผ ์์ ํ์ง ์๊ณ ๋ ์ผ๋ถ ์ปดํฌ๋ํธ ์์์ Hook์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ด๋ฏธ ์์ฑํ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์์ฑํ ํ์ ์์ด ์๋ก ์์ฑํ๋ ์ปดํฌ๋ํธ๋ถํฐ Hook์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ด๊ฒ์ ์๋์ โClass์ ํธํ์ฑโ๊ณผ๋ ์ด์ด์ง๋๋ค.
ย
1.2.3 Class์ ํธํ์ฑ
Hook์ด ๊ธฐ์กด ํจ์ ์ปดํฌ๋ํธ์์ ํด๋์ค ์ปดํฌ๋ํธ์ ์ผ๋ถ ๊ธฐ๋ฅ์ โ์ฐ๋โํ ์ ์๋๋ก ๋์์ฃผ๊ธฐ ๋๋ฌธ์ ๋ ์ด์ Class๋ React์์ ์ฌ์ฉํ ์ ์๋ค๋ ๋ถ์ํจ์ด ์์ ์ ์์ต๋๋ค. ํ์ง๋ง ์์ผ๋ก๋ React๋ Class๋ฅผ ์ง์ํ ์์ ์
๋๋ค. ๋ค์์ React ๊ณต์ ๋ฌธ์์์ ๋ฐ์ทํ ๋ด์ฉ์
๋๋ค.
Hook์ ์กด์ฌํ๋ ์ฝ๋์ ํจ๊ป ๋๋ํ ์๋ํจ์ผ๋ก์จ ์ ์ง์ ์ผ๋ก ์ ์ฉํ ์ ์์ต๋๋ค. (์ค๋ต) React์ ๊ฐ๋ฐ์๋ค์ ํ์ฌ ์ฌ์ฉ ์ค์ธ Class ์ฌ๋ก๋ฅผ Hook์ผ๋ก ๊ต์ฒดํ๋ ๊ฒ์ ์ผ๋์ ๋๊ณ ๋ ์์ง๋ง,ย ๋ฏธ๋์๋ ๊ณ์ ํด๋์ค ์ปดํฌ๋ํธ๋ค์ ์ง์ํ ์์ ์ ๋๋ค.
๋ํ, ํด๋์ค ์ปดํฌ๋ํธย ๋ด๋ถ์์ Hook์ ์ฌ์ฉํ ์๋ ์์ง๋ง, ํด๋์ค ์ปดํฌ๋ํธ์ ํจ์ ์ปดํฌ๋ํธ๋ฅผ ๋จ์ผ ํธ๋ฆฌ์์ Hook๊ณผ ์์ด์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ปดํฌ๋ํธ๊ฐ ํด๋์ค ์ปดํฌ๋ํธ์ธ์ง Hook์ ์ฌ์ฉํ๋ ํจ์ ์ปดํฌ๋ํธ์ธ์ง ์ฌ๋ถ๋ ํด๋น ์ปดํฌ๋ํธ์ ๊ตฌํ ์ธ๋ถ ์ฌํญ์ผ ๋ฟ์
๋๋ค.
ย
1.3 Hook์ ์ฌ์ฉ ๊ท์น
1.3.1 ์ค์ง React ํจ์ ๋ด์์ Hook์ ํธ์ถํด์ผ ํฉ๋๋ค.
Hook์ ์ผ๋ฐ JavaScript ํจ์๋ ํด๋์ค ์ปดํฌ๋ํธ์์๋ ํธ์ถํ ์ ์์ผ๋ฉฐ React ํจ์ ์ปดํฌ๋ํธ, Custom Hook์์ ํธ์ถํ ์ ์์ต๋๋ค.
ย
1.3.2 ์ต์์(at the top level)์์๋ง Hook์ ํธ์ถํด์ผ ํ๊ณ ํ ์ ํธ์ถํ๋ ์์๋ ํญ์ ๊ฐ์์ผ ํฉ๋๋ค.
์ปดํฌ๋ํธ ์์์๋ ๊ฐ์ ํ
์ ์ฌ๋ฌ ๋ฒ ํธ์ถํ ์ ์๋๋ฐ ์ด๋ React๋ Hook์ด ํธ์ถ๋ ์์์ ์์กดํ์ฌ ์ํ ๊ฐ์ ๊ตฌ๋ถํ๊ณ ๊ธฐ์ตํฉ๋๋ค. ์กฐ๊ฑด์ ๋ฐ๋ผ Hook์ด ํธ์ถ๋์ง ์๊ฑฐ๋ ์คํ ํ์๊ฐ ๋ณํ๋ค๋ฉด Hook์ ์คํ ์์๊ฐ ๋ฌ๋ผ์ง๊ณ ๊ทธ๋ก ์ธํด ์ค๋ฅ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค. ๋ฐ๋ผ์ ์กฐ๊ฑด๋ฌธ, ๋ฐ๋ณต๋ฌธ, ์ค์ฒฉ๋ ํจ์ ๋ด์์๋ Hook์ ์ฌ์ฉ์ ์ง์ํด์ผ ํฉ๋๋ค. ์ต์์์์ Hook์ด ํธ์ถ๋๋ฉด ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง ๋ ๋๋ง๋ค Hook์ ์์๋ ํญ์ ๋์ผํ๊ฒ ๋ณด์ฅ๋ฉ๋๋ค.
ย
// ์ฌ๋ฐ๋ฅธ ์์ useEffect(function Form() { if (name !== '') { console.log("๐"); } });
// ์ฌ๋ฐ๋ฅด์ง ์์ ์์ (์กฐ๊ฑด๋ฌธ ๋ด์ Hook์ด ์์นํจ) if (name !== '') { useEffect(function Form() { console.log("๐"); }); }
ย
์ฐธ๊ณ ) ์ํํ Hook์ ์ฌ์ฉ์ ์ํด React๋ ์์ ๊ท์น์ ๊ฐ์ ํด์ฃผ๋
eslint-plugin-react-hooks
๋ผ๋ ESLint ํ๋ฌ๊ทธ์ธ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ Create React App์ ํตํด React ํ๋ก์ ํธ๋ฅผ ์์ฑํ๋ฉด ๊ธฐ๋ณธ์ ์ผ๋ก ํฌํจ๋์ด ์์ผ๋ฉฐ ์๋์ ๊ฐ์ ๋ช
๋ น์ด๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค.ย
npm install eslint-plugin-react-hooks --save-dev
// ESLint ์ค์ ํ์ผ { "plugins": [ // ... "react-hooks" ], "rules": { // ... "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies } }
ย
1.4 Hook์ ์ฌ์ฉํ๋ ์ด์
์์ ์ค๋ช
ํ๋ฏ์ด ํจ์ ์ปดํฌ๋ํธ์์๋ ์ํ๊ด๋ฆฌ์ ์๋ช
์ฃผ๊ธฐ ๋ฉ์๋๋ฅผ ์ด์ฉํ ์ ์๊ธฐ ๋๋ฌธ์ ๋ก์ง์ ์ฌ์ฌ์ฉ ๋ฐ ๊ตฌ์กฐ ํ์
์ด ์ด๋ ต๊ณ ์ฝ๋๊ฐ ๋ณต์กํ ํด๋์ค ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ ์ ๋ฐ์ ์์์ต๋๋ค. ์ดํด๋ฅผ ๋๊ธฐ์ํด ํด๋์ค ์ปดํฌ๋ํธ์ ํจ์ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ๋จํ ๋น๊ตํ์๋ฉด, ํด๋์ค ์ปดํฌ๋ํธ๋
render()
๋ฉ์๋๋ฅผ ๋ฐ๋์ ํฌํจํด์ผ ํฉ๋๋ค. render()
๋ฉ์๋ ๋ด๋ถ์๋ ๋ ๋๋ง ํ๊ณ ์ถ์ JSX ์ฝ๋๋ฅผ ์์ฑํ๋ฉด ๋ฉ๋๋ค. ๋ํ props๋ฅผ ์กฐํํ๊ฑฐ๋ ์ํ๋ฅผ ์
๋ฐ์ดํธํ๋ ค๋ฉด this ํค์๋๋ฅผ ํ์ฉํ์ฌ this.props
, this.setState
๋ฅผ ์ฌ์ฉํด์ผ ํฉ๋๋ค. ๋ฐ๋ผ์ this์ ์๋ ๋ฐฉ์์ ๋ํ ์ดํด๊ฐ ์๋ค๋ฉด ํด๋์ค ์ปดํฌ๋ํธ ํ์ฉ์ ์ด๋ ค์์ ๊ฒช์ ์ ์์ต๋๋ค. ํด๋น ๋ถ๋ถ์ 4-3์ ์์ ์์ธํ๊ฒ ์ดํด๋ณด๊ฒ ์ต๋๋ค. ํ์ง๋ง Hook์ด ๋ฑ์ฅํ ์ดํ ํจ์ ์ปดํฌ๋ํธ์์ ์ํ๊ด๋ฆฌ์ ์๋ช
์ฃผ๊ธฐ ์ด๋ฒคํธ ์ฌ์ฉ์ด ๊ฐ๋ฅํด์ ธ ์์ ๋จ์ ์ ๋ณด์ํ ์ ์์ต๋๋ค. ์๋ ํด๋์ค ์ปดํฌ๋ํธ์ ํจ์ ์ปดํฌ๋ํธ ์์ ์ฝ๋๋ฅผ ๋น๊ตํด๋ณด๋ฉด ํจ์ ์ปดํฌ๋ํธ๊ฐ ๋ ๊ฐ๊ฒฐํ๊ณ ์ดํดํ๊ธฐ ์ฝ๋ค๋ ๊ฒ์ ์ ์ ์์ต๋๋ค.ย
// ํด๋์ค ์ปดํฌ๋ํธ ์์ class Example extends React.Component { constructor() { super(); this.state = {title: "example"}; } render() { return <p>hello, {this.state.title}</p> } }
ย
// ํจ์ํ ์ปดํฌ๋ํธ ์์ function Example () { let [title, setTitle] = useState("example") return <p>hello, {title}</p> }
ย
ํจ์ ์ปดํฌ๋ํธ์ ์ฌ์ฉ์ ๋ ํธ๋ฆฌํ๊ฒ ๋ง๋ Hook์ 3๊ฐ์ง ์ฅ์ ์ ๊ฐ์ง๊ณ ์์ต๋๋ค.
- Hook์ ํตํด ์ปดํฌ๋ํธ ๊ฐ ์ํ ๋ก์ง์ ์ฌ์ฌ์ฉ ํ ์ ์์ต๋๋ค.
- Hook์ ๊ตฌ์กฐ๋ฅผ ์ดํดํ๊ธฐ ์ฝ์ต๋๋ค.
- Hook์ ํด๋์ค ์ปดํฌ๋ํธ ์์ด React๋ฅผ ์ฌ์ฉ ๊ฐ๋ฅํ๊ฒ ๋ง๋ญ๋๋ค.
ย
React์์๋ ์ด์ ๊ฐ์ ์ฅ์ ์ ์ด์ ๋ก Hook์ ์ฌ์ฉํ๋ ๊ฒ์ ๊ถ์ฅํ๋ฉฐ ์ง๊ธ๋ถํฐ ๊ณต์๋ฌธ์์ ์ ์๋ ๋ด์ฉ์ ๋ฐํ์ผ๋ก Hook์ ์ฌ์ฉ ๋๊ธฐ๋ฅผ ์ด์ผ๊ธฐํด๋ณด๊ฒ ์ต๋๋ค.
ย
1.4.1 Hook์ ํตํด ์ปดํฌ๋ํธ ๊ฐ ์ํ ๋ก์ง์ ์ฌ์ฌ์ฉ ํ ์ ์์ต๋๋ค.
ํ๋ก๊ทธ๋จ์ ๋ง๋ค๋ค ๋ณด๋ฉด ์ค๋ณต ์ฝ๋๋ฅผ ์ฝ๊ฒ ๋ง๋ ์ ์์ต๋๋ค. ์ด๋ ์ค๋ณต๋ ์ฝ๋๋ก ์ธํด ๋ฐ์ํ๋ ๋ถํ์ํ ๋ฆฌ์์ค๋ฅผ ์ค์ด๊ณ ์ ์ํฉ์ ๋ฐ๋ผ ์ฝ๋๋ฅผ ์ฌ์ฌ์ฉํฉ๋๋ค. ๋ง์ฐฌ๊ฐ์ง๋ก React์์๋ ์ค๋ณต ์ปดํฌ๋ํธ ๋ก์ง๋ค์ ๋ง๋ ์ ์๋๋ฐ, React์์๋ ์ด๋ฌํ ์ค๋ณต ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฌ์ฉ ํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ง ์์์ต๋๋ค. ์ด๋ฅผ ํด๊ฒฐํ๊ณ ์ ํด๋์ค ์ปดํฌ๋ํธ์์๋ Render props, ๊ณ ์ฐจ ์ปดํฌ๋ํธ(HOC, Higher Order Component)์ ๊ฐ์ ์ฌ์ฌ์ฉ ํจํด์ ์ฌ์ฉํ์ต๋๋ค. ํ์ง๋ง ์๋ ์์ โ ๋ถ๋ถ์ฒ๋ผ ์ฌ์ฌ์ฉํ ๋๋ง๋ค ๋งค๋ฒ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ธ์ค์ผ ํ๊ธฐ ๋๋ฌธ์, ๋ก์ง์ด ๊ณ์ ๊ฒน์ณ์ง๋ฉด์ ๋ฐ์ํ๋ ๋ํผ ์ง์ฅ(wrapper hell)์ ๋ง๋ ํ๋ฅ ์ด ๋์์ก๊ณ , ์ฝ๋๋ฅผ ์ถ์ ํ๊ธฐ ์ด๋ ค์ด ์ํฉ๋ค์ด ๋ฐ์ํ์ต๋๋ค.
ย
// ๊ณ ์ฐจ ์ปดํฌ๋ํธ๋ก ์ปดํฌ๋ํธ ์ฌ์ฌ์ฉํ๊ธฐ // ๊ณ ์ฐจ ์ปดํฌ๋ํธ function withLogin(WrapperComponent) { return class extends React.Component { // ์์ฑ์ ๋ฐ ๊ณตํต ์ํ ๋ก์ง constructor() { state = { user: [] } } componentDidMount() { // ๋น๋๊ธฐ ์์ ์ฒ๋ฆฌ(๋ฐ์ดํฐ ๋ฐ์์ค๊ธฐ) } // ๋ด๋ถ ์ปดํฌ๋ํธ ๋ ๋๋ง render() { return <WrapperComponent {...this.state} {...this.props} />; } }; }; // ์ปดํฌ๋ํธ ์ฌ์ฌ์ฉ function LoginPage ({ user }) { // ๋ด๋ ค๋ฐ์ user ๋ฐ์ดํฐ ์ฌ์ฉ } export default withLogin(LoginPage); // --- โ ๊ณ ์ฐจ ์ปดํฌ๋ํธ๋ก ๊ฐ์ธ์ฃผ๊ธฐ
ย
์ด๋ฐ ๋ฌธ์ ์ ๋ค์ Hook์ ํตํด ํด๊ฒฐํ ์ ์๊ฒ ๋์์ต๋๋ค. Hook์ด ๋์จ ์ดํ ํจ์ ์ปดํฌ๋ํธ์์ ์ํ ๊ด๋ จ ๋ก์ง์ ์ถ์ํํ ์ ์๊ฒ ๋๋ฉด์, Custom Hook์ ํตํด ์ปดํฌ๋ํธ ๊ฐ ์ํ๋ฅผ ์ ์ฅํ๊ณ ๊ณต์ ํ ์ ์๊ฒ ๋์๊ธฐ ๋๋ฌธ์
๋๋ค. ์ด์ ๋ ๊ณ ์ฐจ ์ปดํฌ๋ํธ์ ๊ฐ์ ํจํด์ ์ฌ์ฉํ์ง ์๊ณ ๋ Hook์ผ๋ก ์์ฝ๊ฒ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฌ์ฉ ํ ์ ์์ต๋๋ค.
ย
// Custom Hook์ผ๋ก ์ปดํฌ๋ํธ ์ฌ์ฌ์ฉํ๊ธฐ // Custom Hook function useLogin() { const [user, setUser] = useState([]); useEffect(() => { // ๋น๋๊ธฐ ์์ ์ฒ๋ฆฌ(๋ฐ์ดํฐ ๋ฐ์์ค๊ธฐ) }, []); return [user]; } // ์ปดํฌ๋ํธ ์ฌ์ฌ์ฉ function LoginPage() { const [user] = useLogin(); return ( <> {user.map(({ no, email, name }, idx) => { <div key={no}> <p>{email}</p> <strong>{name}</strong> </div> })} </> ) }
ย
1.4.2 Hook์ ๊ตฌ์กฐ๋ฅผ ์ดํดํ๊ธฐ ์ฝ์ต๋๋ค.
์ปดํฌ๋ํธ์ ๊ตฌ์กฐ๊ฐ ๋ณต์กํ ๊ฒฝ์ฐ, ์๋ช
์ฃผ๊ธฐ(Lifecycle) ๋ํ ํ์
ํ๊ธฐ ํ๋ค๊ธฐ ๋๋ฌธ์ ์ ์ง ๋ณด์๊ฐ ์ด๋ ค์์ง๋๋ค. ๋ํ React๋ ์ปดํฌ๋ํธ ๊ฐ ์ํ๋ฅผ ์ ์ฅํ๊ณ ๊ณต์ ํ ์ ์์ผ๋ฏ๋ก ์ํ ๊ด๋ จ ๋ก์ง์ ๋ฐ๋ก ๊ด๋ฆฌํ๊ณ ์ ์ปดํฌ๋ํธ๋ก ์๊ฒ ๋ถ๋ฆฌํ๋ ๊ฒ์ ๊ฑฐ์ ๋ถ๊ฐ๋ฅํ๋ฉฐ ํ
์คํธํ๊ธฐ๋ ์ด๋ ต์ต๋๋ค. ์ด๋ฅผ ๋ณ๋์ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํจ๊ป ๊ฒฐํฉํ์ฌ ๋ณด์ํ ์ ์์ผ๋, Hook์ ์ฌ์ฉํ๋ฉด ๊ตฌ์กฐ์ ๋ณํ ์์ด ๊ฐ๊ฐ์ ์ปดํฌ๋ํธ ๋ด์์ ์ํ๋ฅผ ๊ด๋ฆฌํ๊ณ ๋ณ๊ฒฝํ ์ ์๊ธฐ ๋๋ฌธ์ React์ ์ข ๋ ์ง๊ด์ ์ธ API๋ฅผ ์ ๊ณตํ ์ ์์ต๋๋ค.
ย
์ปดํฌ๋ํธ์ ์๋ช
์ฃผ๊ธฐ
๋ชจ๋ ์ปดํฌ๋ํธ๋ ์ฌ๋ฌ ์ข
๋ฅ์ โ์๋ช
์ฃผ๊ธฐโ๋ฅผ ๊ฐ์ง๋ฉฐ, ํด๋์ค ์ปดํฌ๋ํธ์์๋ โ์๋ช
์ฃผ๊ธฐ ๋ฉ์๋โ๋ฅผ ์ค๋ฒ๋ผ์ด๋ฉํ์ฌ ํน์ ์์ ์ ์ฝ๋๊ฐ ์คํ๋๋๋ก ์ค์ ํ ์ ์์ต๋๋ค.
์๋ช
์ฃผ๊ธฐ๋ ๋ณดํตย ํ์ด์ง์ ๋ ๋๋ง ์ค๋น ๊ณผ์ ์์ ์์ํ์ฌ ํ์ด์ง๋ฅผ ์
๋ฐ์ดํธํ๊ณ ํ์ด์ง์์ ์ฌ๋ผ์ง ๋ ๋๋๊ฒ ๋ฉ๋๋ค. ์ด๋ฅผ ์ด๊ธฐํ(Initialize) - ์์ฑ(Mounting) - ์
๋ฐ์ดํธ(Props change, State Change) - ์๋ฉธ(Unmounting)์ 4๋จ๊ณ๋ก ํํํ ์ ์์ต๋๋ค.
์ปดํฌ๋ํธ๊ฐ ์์ฑ๋๊ณ ์
๋ฐ์ดํธ๋ ํ ์๋ฉธ๋๋ ๊ณผ์ ์์ ์๋ช
์ฃผ๊ธฐ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๊ฒ ๋๋๋ฐ ํด๋น ์๋ช
์ฃผ๊ธฐ ๋จ๊ณ์์ ๋น๋๊ธฐ์ ์ผ๋ก ์ฌ์ฉ์์ ์
๋ ฅ์ ํ๋ฉด์ ๋ ๋๋งํ๊ฑฐ๋ ์น ์๋ฒ์ ํต์ ํ์ฌ ๋ฐ์ดํฐ๋ฅผ ์กฐํํ๋ ๋ฑ์ ์
๋ฌด๋ฅผ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
ย
โ Hook์ ์ด์ฉํ๋ฉด ํจ์ ์ปดํฌ๋ํธ์์๋ ์ํ ๊ด๋ฆฌ(state)์ React์ ๊ธฐ๋ฅ(์๋ช
์ฃผ๊ธฐ ์ด๋ฒคํธ ๋ฑ)์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
ย
ย
ย
1.4.3 Hook์ ํด๋์ค ์ปดํฌ๋ํธ ์์ด React๋ฅผ ์ฌ์ฉ ๊ฐ๋ฅํ๊ฒ ๋ง๋ญ๋๋ค.
ํด๋์ค ์ปดํฌ๋ํธ๋ ํจ์ ์ปดํฌ๋ํธ ๋ณด๋ค ๋ง์ ๊ธฐ๋ฅ์ ๊ฐ์ง๊ณ ์์ง๋ง ์ฝ๋๊ฐ ๊ธธ๊ณ ๋ณต์กํฉ๋๋ค. ์๋ฅผ ๋ค๋ฉด ํด๋์ค ์ปดํฌ๋ํธ๋ this ํค์๋์ ์๋๋ฐฉ์์ ์ ๋๋ก ์ดํดํ์ง ๋ชปํด ์์์น ๋ชปํ ์ค๋ฅ๋ฅผ ๋ง๋ฉ๋๋ค. this๋ ์ํฉ์ ๋ฐ๋ผ ์กฐ์ ๋ฐ ๋ณ๊ฒฝ์ด ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ์ค๋ฅ๋ฅผ ์์ ํ ๋๋ ํจ์ํ ์ปดํฌ๋ํธ์ ๋ฌ๋ฆฌ ๊ธธ๊ณ ๋ณต์กํ ์ฝ๋๋ฅผ ์์ฑํด์ผ ํฉ๋๋ค. ๋ํ ํด๋์ค ์ปดํฌ๋ํธ๋ ํ์ด์ง ์์ฑ ์๋๊ฐ ๋๋ฆฝ๋๋ค. React ๊ณต์ ๋ฌธ์์์ ๋ฐ์ทํด์จ ์๋ฃ์๋ Prepack ์ปดํ์ผ๋ฌ๋ฅผ ํ์ฉํด ํด๋์ค ์ปดํฌ๋ํธ๋ฅผ ํ
์คํธํ ๊ฒฐ๊ณผ, ํด๋์ค ์ปดํฌ๋ํธ๊ฐ ์ปดํ์ผ ์๋์ ๋ถ์ ์ ์ธ ์ํฅ์ ๋ฏธ์ณค์ต๋๋ค.
ย
์ด์ ๊ฐ์ ํด๋์ค ์ปดํฌ๋ํธ์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ํจ์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํด์ผ ํฉ๋๋ค. Hook์ React์์ ํจ์ ์ปดํฌ๋ํธ๋ฅผ ๋ณดํธ์ ์ผ๋ก ์ฌ์ฉํ ์ ์๊ฒ ๋ง๋๋ ๋๊ตฌ์
๋๋ค. Hook์ด ๋์ค๊ธฐ ์ ์๋ state์ ์๋ช
์ฃผ๊ธฐ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๋ค๋ ์ด์ ๋ก ํจ์ ์ปดํฌ๋ํธ๊ฐ ๋ง์ด ์ฐ์ด์ง ๋ชปํ์ง๋ง Hook์ ๋ฑ์ฅ ์ดํ ํจ์ ์ปดํฌ๋ํธ๊ฐ ์ ๊ทน์ ์ผ๋ก ํ์ฉ๋์์ต๋๋ค. ์๋ ๊ทธ๋ฆผ์ ํตํด Props Drilling๊ณผ state๋ฅผ ์ด์ฉํ ์ํ ๊ด๋ฆฌ๋ฅผ ๋น๊ตํด๋ณผ ์ ์์ต๋๋ค. Props Drilling์ ์ตํ์ ์ปดํฌ๋ํธ์์ props๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด ์ฐ๊ฒฐ๋ ๋ชจ๋ ์์ ์ปดํฌ๋ํธ๋ฅผ ๊ฑฐ์ณ์ผ ํ๋ ๋ฐ๋ฉด state๋ฅผ ์ด์ฉํ๋ฉด ๋ฐ์ดํฐ๊ฐ ํ์ํ ์ปดํฌ๋ํธ์ ๋ฐ๋ก ์ฌ์ฉ ๊ฐ๋ฅํฉ๋๋ค.
ย
ย
๋ํ ํ์ดํ ํจ์๋ฅผ ์ฌ์ฉํ์ฌ this๋ฅผ ๋ฐ์ธ๋ฉํ์ง ์์ ์ฝ๋์ ๊ฐ๊ฒฐํจ์ ์ ์งํ ์ ์๊ณ ๊น์ ์ปดํฌ๋ํธ ํธ๋ฆฌ ์ค์ฒฉ์ด ์ผ์ด๋์ง ์๊ธฐ ๋๋ฌธ์ ์๋๊ฐ ๋น ๋ฆ
๋๋ค. ๋ง์ง๋ง์ผ๋ก ๊ฐ๋
์ ์๋ฏธ์์ React ์ปดํฌ๋ํธ๋ ํจ์์ ๊ฐ๊น์ต๋๋ค. ํจ์๋ฅผ ์งํฅํ๋ React ์ ์ ์ ์๊ธฐ ์ํด์๋ Hook์ ์ฌ์ฉ์ ๊ถ์ฅํฉ๋๋ค.
ย