custom hook

    [ReactJS] ๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ์™€ Custom Hook

    ๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ ๊ฐ๊ฐ์˜ ๊ด€์‹ฌ์‚ฌ์— ๋”ฐ๋ผ ์ฝ”๋“œ๋ฅผ ๋ถ„๋ฆฌํ•˜๋Š” ๊ธฐ๋ฒ• ์ฝ”๋“œ๊ฐ€ ํ•˜๋‚˜์˜ ๊ด€์‹ฌ์‚ฌ๋งŒ ์‹ ๊ฒฝ์“ฐ๋„๋ก ๋ถ„๋ฆฌํ•˜๋Š” ๊ฒƒ ๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ์˜ ํŠน์ง• ํŠน์ •ํ•œ ๋ณ€ํ™”์— ๋Œ€์‘ํ•˜๊ธฐ ์œ„ํ•ด ์ฝ๊ณ  ์ดํ•ดํ•˜๊ณ  ์ˆ˜์ •ํ•ด์•ผ ํ•˜๋Š” ์ฝ”๋“œ์˜ ๋‹จ์œ„๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ์–ด ์œ ์ง€ ๋ณด์ˆ˜์— ์šฉ์ดํ•ด์ง„๋‹ค. ํ•˜๋‚˜์˜ ์ฝ”๋“œ๊ฐ€ ํ•˜๋‚˜์˜ ๊ธฐ๋Šฅ์„ ๋‹ด๋‹ดํ•˜๊ธฐ์— ์—ฌ๋Ÿฌ ์—ญํ• ์ด ํ˜ผ์žฌ๋œ ์ฝ”๋“œ๋ณด๋‹ค ๋‹จ์œ„๋ณ„๋กœ ์žฌ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฌ์›Œ์ง„๋‹ค. ์ฝ”๋“œ์˜ ๊ธฐ๋Šฅ ํ…Œ์ŠคํŠธ ๋˜ํ•œ ์‰ฌ์›Œ์ง„๋‹ค. ๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ๊ฐ€ ์ž˜ ๋œ ์†Œํ”„ํŠธ์›จ์–ด๋Š” ๋‚ฎ์€ ๊ฒฐํ•ฉ๋„์™€ ๋†’์€ ์‘์ง‘๋„๋ž€ ํŠน์ง•์ด ๋‚˜ํƒ€๋‚œ๋‹ค. ๋‚ฎ์€ ๊ฒฐํ•ฉ๋„ (Loose Coupling) : ์ฝ”๋“œ๊ฐ€ ์–ฝํ˜€์žˆ์ง€ ์•Š๊ณ  ๊ด€์‹ฌ์‚ฌ์— ๋”ฐ๋ผ ๋…๋ฆฝ์ ์œผ๋กœ ์ž˜ ๋ถ„๋ฆฌ๋˜์–ด ์žˆ๋‹ค. ๋†’์€ ์‘์ง‘๋„ (High Cohesive) : ๋™์ผํ•œ ๋ชฉ์ (๊ด€์‹ฌ์‚ฌ)๋ฅผ ๊ฐ€์ง„ ์ฝ”๋“œ๋ผ๋ฆฌ ์ž˜ ๋ชจ์—ฌ์žˆ๋‹ค. KISS ์›์น™ Keep It Simple, Stup..