๋ฆฌ์•กํŠธ State Hook๊ณผ ์ƒํƒœ, ์ƒ๋ช…์ฃผ๊ธฐ
ยท
ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด/React & NextJS
๋“ค์–ด๊ฐ€๋ฉฐ์•ž์„œ ์†Œ๊ฐœํ–ˆ๋‹ค์‹œํ”ผ React๋Š” ์„ ์–ธํ˜•(Declarative UI) ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ตฌ์กฐ์ž…๋‹ˆ๋‹ค. ์ด๋Š” UI๋ฅผ ์–ด๋–ป๊ฒŒ ๋ณ€๊ฒฝํ• ์ง€๊ฐ€ ์•„๋‹ˆ๋ผ ์–ด๋–ค ๋ชจ์Šต์ผ์ง€๋กœ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ์–ด๋–ค ๋ชจ์Šต์ผ์ง€์— ๋Œ€ํ•œ state๋งŒ ๊ด€๋ฆฌํ•˜๋ฉด React๊ฐ€ ์•Œ์•„์„œ ํ™”๋ฉด์„ ์—…๋ฐ์ดํŠธํ•ด์ค๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœํ•  ๋•Œ๋Š” UI Component์˜ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ  ์กฐ์ž‘ํ•˜๋Š”๋ฐ ์˜จ ์‹ ๊ฒฝ์„ ์“ฐ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  React์˜ Hook์€ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ ์ƒํƒœ(state)์™€ ๋ผ์ดํ”„์‚ฌ์ดํด(lifecycle)์„ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. 1. useState – ์ƒํƒœ(State) ๊ด€๋ฆฌimport { useState } from "react";function Counter() { const [count, setCount] = useState(0); ..