2. React State
Last updated
Last updated
๐ ๋ฆฌ์กํธ๋ฅผ ์ด์ฉํ๋ ๊ธฐ์ด
UI ์ํ์ ์ต์ํ์, ์๋ฒฝํ ํํ ์ฐพ๊ธฐ
์ํ๊ฐ ์์ด์ผ ํ๋ ์์น ํ์ธ
์ญ๋ฐฉํฅ ๋ฐ์ดํฐ ํ๋ฆ ์ถ๊ฐ
React์ state๋ ๋ณ๊ฒฝ์ ๋ค๋ฃจ๊ธฐ ์ํ ์์
state๊ฐ ๋ณ๊ฒฝ๋ ๋ ๋ฆฌ๋ ๋๋ง์ด ๋ฐ์ ์ด๋ค ์ปดํฌ๋ํธ์ state๊ฐ ๋ฐ๋๋ฉด ํด๋น state๋ฅผ ๊ฐ์ง๊ณ ์๋ ์ปดํฌ๋ํธ์ ํ์ ์ปดํฌ๋ํธ๋ฅผ ๋ค์ ๋ ๋๋ง ๋ฆฌ๋ ๋๋ง์ ๋ชจ๋ ์ปดํฌ๋ํธ์ render๋ฅผ ํธ์ถํ๋ ๊ฒ์ด์ง, React๊ฐ ์ธ๋ง์ดํธ์ํค๊ณ ๋ค์ ๋ง์ดํธํ๋ ๊ฒ์ ์๋
์ ํ๋ฆฌ์ผ์ด์ ์ด ๊ฐ์ง๋ state โ๏ธ ๋ฐ์ดํฐ๊ฐ ์๋ค๊ณ ํด์ ๋ค state์ธ ๊ฒ์ ์๋
์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ๊ฒ์์ด
์ฒดํฌ๋ฐ์ค์ ๊ฐ
๐ React State์ ์กฐ๊ฑด
๋ถ๋ชจ๋ก๋ถํฐ props๋ฅผ ํตํด ์ ๋ฌ๋๋๊ฐ? ๊ทธ๋ฌ๋ฉด state๊ฐ ์๋๋ค.
์๊ฐ์ด ์ง๋๋ ๋ณํ์ง ์๋๊ฐ? ๊ทธ๋ฌ๋ฉด state๊ฐ ์๋๋ค. โ ๋ณ๊ฒฝ๋์ผ ํจ
์ปดํฌ๋ํธ ์์ ๋ค๋ฅธ state๋ props๋ฅผ ๊ฐ์ง๊ณ ๊ณ์ฐ ๊ฐ๋ฅํ๊ฐ? ๊ทธ๋ฌ๋ฉด state๊ฐ ์๋๋ค. โ โจ ๊ณ์ฐ์ด ๋ถ๊ฐ๋ฅํด์ผ ํจ
๐ก DRY ์์น์ด ํต์ฌ ์๋ฌด๋ ๊ฒ๋ ๋ง๋ค์ด๋ ๋์ง๋ง, ์ผ๊ด์ฑ๊ณผ ํจ์จ์ ์ํด DRY ์์น์ ๋ฐ๋ฅด๋ SSOT๋ฅผ ๋ง๋ค๊ธฐ ์ ํ๋ฆฌ์ผ์ด์ ์ด ํ์๋ก ํ๋ ๊ฐ์ฅ ์ต์ํ์ state๋ฅผ ์ฐพ๊ณ ์ด๋ฅผ ํตํด ๋๋จธ์ง ๋ชจ๋ ๊ฒ๋ค์ด ํ์์ ๋ฐ๋ผ ๊ทธ๋๊ทธ๋ ๊ณ์ฐ๋๋๋ก ๋ง๋ค ๊ฒ
TypeScript ์ด์ฉํ๊ธฐ
๋ค๋ฃจ๋ ์ํ๊ฐ ๋๋ฌด ๋ง์ผ๋ฉด ๋ณต์กํจ
interface
, type
๋ฑ TypeScript๋ฅผ ์ ํ์ฉํด์ ์ํ๋ฅผ ๋ฌถ์ผ๋ฉด, ์ง์ ๊ด๋ฆฌํ๋ ์ํ์ ์๋ฅผ ์ค์ผ ์ ์์
props๋ฅผ ๋๊ฒจ์ฃผ๊ธฐ ์ฌ์
์ฌ์ฌ์ฉ ํธ๋ฆฌ
์ค๋ณต ๋ฐฐ์ (Don't repeat yourself) ๋ชจ๋ ํํ์ ์ ๋ณด ์ค๋ณต์ ์ง์ํ๋ ์๋ฆฌ ๋๊ฐ์ ์ฝ๋๋ฅผ ์ ๋ Copy&Paste(๋ฐ๋ณต)ํ์ง ๋ง๋ผ๋ ์์น
๐ ์ํํธ์จ์ด ๊ฐ๋ฐ 3๊ฐ์ง ์์น
๋จ์ผ ์ง์ค ๊ณต๊ธ์
๋ชจ๋ ๋ฐ์ดํฐ ์์๋ฅผ ํ ๊ณณ์์๋ง ์ ์ด ๋๋ ํธ์งํ๋๋ก ์กฐ์งํ๋ ๊ฒ ๋ชจ๋ ์ ์ญ ์ํ๋ ํ๋์ ๊ฐ์ฒด(์คํ ์ด) ์์ ํธ๋ฆฌ๊ตฌ์กฐ๋ก ์ ์ฅ ๋ฐ์ดํฐ ์์๋ก์ ๊ฐ๋ฅํ ์ฐ๊ฒฐ์ ๋ชจ๋ ์ฐธ์กฐ๋ก๋ง ์ด๋ฃจ์ด์ง
๋ชจ๋ ์ํ๊ฐ ํ๋์ ์คํ ์ด์ ์ ์ฅ๋์ด ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋จ์ํด์ง๊ณ , ์์ธกํ๊ธฐ ์ฌ์
Undo, Redo ๋ฑ์ ๊ธฐ๋ฅ์ ๊ตฌํํ๊ธฐ๋ ์ฌ์์ง
๋ ์ด์ ์ฌ๋ผ๊ฐ ํ์๊ฐ ์์ ๋๊น์ง ์ํ๋ฅผ ๋์ด์ฌ๋ฆฌ๋ ๊ฒ
๐จโ๐ฉโ๐งโ๐ฆ ์ํ๋ฅผ ๋๊ฐ ๊ด๋ฆฌํ๊ณ , ์์ ํด์ผ ํ ๊น?
(React๋ง ์ฌ์ฉํ ๊ฒฝ์ฐ) ํด๋น ์ํ์ ์์กด์ ์ธ ์ปดํฌ๋ํธ๋ฅผ ๋ชจ๋ ํฌํจํ๋ ์ปดํฌ๋ํธ๊ฐ ์ํ๋ฅผ ์์ ํด์ผ ํจ
React ๋ฒ์ 16.8๋ถํฐ React ์์๋ก ์๋ก ์ถ๊ฐ Hook์ ์ด์ฉํ์ฌ ๊ธฐ์กด Class ๋ฐํ์ ์ฝ๋๋ฅผ ์์ฑํ ํ์ ์์ด ์ํ ๊ฐ๊ณผ ์ฌ๋ฌ React์ ๊ธฐ๋ฅ์ ์ฌ์ฉ ๊ฐ๋ฅ
์ํ๊ฐ
๊ณผ ๊ทธ ๊ฐ์ ๊ฐฑ์ ํ๋ ํจ์
๋ฅผ ๋ฐํ
์ต์ด๋ก ๋ ๋๋ง์ ํ๋ ๋์, ๋ฐํ๋ state๋ ์ด๊ธฐ๊ฐ(initialState)๊ณผ ๊ฐ์
setState ํจ์๋ state๋ฅผ ๊ฐฑ์ ํ ๋ ์ฌ์ฉ ์ state ๊ฐ์ ๋ฐ์ ์ปดํฌ๋ํธ ๋ฆฌ๋ ๋๋ง์ ํ์ ๋ฑ๋ก useState๋ฅผ ํตํด ๋ฐํ๋ฐ์ ์ฒซ ๋ฒ์งธ ๊ฐ์ ํญ์ ๊ฐฑ์ ๋ ์ต์ state
๊ธฐ์กด ์ํ๋ฅผ ์ป๊ณ ์ถ์ ๋๋ ํจ์๋ฅผ ๋ฃ์ด์ค
setState๊ฐ ์ฝ์คํ์ ๋ค์ด๊ฐ
์ฝ์คํ์๋ ํ ๋ฒ์ ํ๋์ ํจ์๋ง ๋ฑ๋ก
๋น๋๊ธฐ ๊ฐ์ฒด์ด๊ธฐ ๋๋ฌธ์ ๋ฐ๋ก Web APIs๋ก ๋์ด๊ฐ(์ฝ์คํ์์ ๋น์์ง)
Web APIs์์ time ์ฒ๋ฆฌ๊ฐ ๋๋จ
๊ฐ์ด ์ฝ๋ฐฑ ํ๋ก ๋ค์ด๊ฐ
์ด๋ฒคํธ ๋ฃจํ๋ฅผ ๋๋ฉด์ ๋ค์ ์ฝ์คํ์ ๋ค์ด๊ฐ์ผ ํ๋๋ฐ, ์ฝ์คํ์ ์ด๋ฏธ console.log() ์กด์ฌ
์ฝ ์คํ์ด ๋น์์ง ๋๊น์ง ๊ธฐ๋ค๋ฆฌ๋ค๊ฐ ๋ค์ด๊ฐ
๊ณ์ธต ๊ตฌ์กฐ์ ํ์์ ์๋ ํผ ์ปดํฌ๋ํธ์์ ์์ ์ปดํฌ๋ํธ์ state ์ ๋ฐ์ดํธํ๊ธฐ ์์ ์ปดํฌ๋ํธ์์ ์ ๋ฌ๋ ์ฝ๋ฐฑ ํจ์๋ setState()๋ฅผ ํธ์ถํ๊ณ ์ฑ์ ์ ๋ฐ์ดํธ
๋ฐ์ดํฐ๋ฅผ ์์์ ์๋๋ก ๋ณด๋ผ ๋๋ props๋ฅผ ํตํด ์ ๋ฌ โฌ๏ธ ๋ฐ์ดํฐ๋ฅผ ์๋์์ ์๋ก ๋ณด๋ผ ๋๋ ํ์ ์ปดํฌ๋ํธ์ props๋ก ํจ์๋ฅผ ์ ๋ฌ(์ํ๋ฅผ ๋ณ๊ฒฝํ ์ ์๋ ์ฝ๋ฐฑ ํจ์) โฌ๏ธ
TypeScript(์ ํํ๋ JavaScript)์์๋ ํจ์๊ฐ ์ผ๊ธ(first-class) ๊ฐ์ฒด์ด๊ธฐ ๋๋ฌธ์, ์ด๋ค ํจ์๋ฅผ ๋ค๋ฅธ ํจ์์ ์ธ์๋ก ๋๊ฒจ์ฃผ๊ฑฐ๋, ์ด๋ค ํจ์๋ฅผ ๋ฆฌํด๊ฐ์ผ๋ก ์ฌ์ฉํ ์ ์์ ์ต๋ช ํจ์, ํด๋ก์ ๋ฑ๊ณผ ํจ๊ป ์ฌ์ฉํ๋ฉด ์๋์ง๊ฐ ํผ
ํจ์๋ฅผ ๋ค๋ฅธ ๋ณ์์ ๋์ผํ๊ฒ ๋ค๋ฃจ๋ ์ธ์ด๋ ์ผ๊ธ ํจ์๋ฅผ ๊ฐ์ก๋ค๊ณ ํํ ์ผ๊ธ ํจ์๋ฅผ ๊ฐ์ง ์ธ์ด์์๋ ํจ์๋ฅผ ๋ค๋ฅธ ํจ์์ ์ธ์๋ก ์ ๊ณตํ๊ฑฐ๋, ํจ์๊ฐ ํจ์๋ฅผ ๋ฐํํ ์ ์์ผ๋ฉฐ, ๋ณ์์๋ ํ ๋นํ ์ ์์
์ฝ๋ฐฑ ํจ์ : ๋ค๋ฅธ ํจ์์ ์ธ์๋ก ์ ๋ฌ๋ ํจ์(์ ์ด๊ถ์ ๋๊ฒจ์ค ํจ์)
๊ณ ์ฐจ ํจ์ : ํจ์๋ฅผ ๋ฐํํ๋ ํจ์
: ์ค๋ณต ๋ฐฐ์ : ๊ด์ฌ์ฌ ๋ถ๋ฆฌ, SRP, ๋ถํ์ํ ๋ณต์ก์ฑ ์ง์ : ์ค์ ๋ก ํ์ํ๊ธฐ ์ ๊น์ง ๊ตฌํํ์ง ๋ง ๊ฒ
๋ค๋ฅธ ๊ฐ์ฒด๋ค์ ์ผ๋ฐ์ ์ผ๋ก ์ ์ฉ ๊ฐ๋ฅํ ์ฐ์ฐ์ ๋ชจ๋ ์ง์ํ๋ ๊ฐ์ฒด ํจ์์ ์ธ์๋ก ๋๊ธฐ๊ธฐ, ์์ ํ๊ธฐ, ๋ณ์์ ๋์ ํ๊ธฐ์ ๊ฐ์ ์ฐ์ฐ์ ์ง์ํ ๋ ์ผ๊ธ ๊ฐ์ฒด๋ผ๊ณ ๋ถ๋ฆ