header-img
Info :
useState 1
list_img
๋™์ ์ธ ๊ฐ’์„ ํ• ๋‹นํ•˜๊ธฐ ์œ„ํ•œ ๋ณ€์ˆ˜, useState 2
2023.11.01
๋ฆฌ์•กํŠธ 16.8 ๋ฒ„์ „ ์ด์ „์—์„œ๋Š” ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ํ•  ์ˆ˜๊ฐ€ ์—†์—ˆ์Œ. (์ปจ๋ฒ„ํŒ… ํ•˜๋Š” ์‚ฌ๋žŒ๋„ ๋ณด์•˜๋‹ค..) ํ•˜์ง€๋งŒ 16.8 ๋ฒ„์ „ ๋ถ€ํ„ฐ Hooks ๋ผ๋Š” ๊ธฐ๋Šฅ์ด ๋„์ž…๋˜๋ฉฐ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.! โ€‹ โ€ป Hook : ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ์—์„œ React state (๋ฆฌ์•กํŠธ์—์„œ ์•„์ฃผ ์ค‘์š”ํ•œ ๊ฐœ๋… ์ค‘ ํ•˜๋‚˜) ์™€ ์ƒ๋ช…์ฃผ๊ธฐ ๊ธฐ๋Šฅ(lifecycle features)์„ ์—ฐ๋™ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜. โ€ป ์ƒํƒœ๊ด€๋ฆฌ(State Management) : ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•. ์—ฌ๋Ÿฌ component ๊ฐ„์— ๋ฐ์ดํ„ฐ ์ „๋‹ฌ๊ณผ ์ด๋ฒคํŠธ ํ†ต์‹ ์„ ํ•œ ๊ณณ์—์„œ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธ. โ€‹ ๋ฆฌ์•กํŠธ๋กœ ๊ฐœ๋ฐœ์„ ํ•˜๋‹ค๋ณด๋ฉด usestate ๋ฅผ ์ ์ ˆํ•œ ์œ„์น˜์—์„œ ์„ ์–ธํ•˜๊ณ , ์ž˜ ๋‚ด๋ ค์ฃผ๊ณ (์ƒ์†) ๊ผฌ์ด์ง€ ์•Š๋„๋ก ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ๊ณ ์˜ค๊ธ‰ ์Šคํ‚ฌ..