ํผ๋๋ก ๋์๊ฐ๊ธฐ
Dev.toFrontend
์๋ฌธ ์ฝ๊ธฐ
Lexical Binding ๊ธฐ๋ฐ Closure๋ฅผ ํตํ ์ํ ์ ์ง ๋ฐ ์บก์ํ ๊ตฌํ
Some basic understanding of closure๐
AI ์์ฝ
Context
ํจ์ ์คํ ์ข ๋ฃ ํ ์ง์ญ ๋ณ์๊ฐ ์๋ฉธํ๋ ๊ธฐ๋ณธ ์คํ ๋ฉ๋ชจ๋ฆฌ ๊ตฌ์กฐ์ ํ๊ณ ๋ถ์. ํน์ ์ํ๋ฅผ ์ ์งํ๋ฉด์ ์ธ๋ถ ์ ๊ทผ์ ์ ํํด์ผ ํ๋ Data Privatization ์๊ตฌ์ฌํญ ๋ฐ์.
Technical Solution
- Lexical Scope ์๋ฆฌ๋ฅผ ์ด์ฉํด ๋ด๋ถ ํจ์๊ฐ ์ธ๋ถ ํจ์์ ๋ณ์๋ฅผ ์ฐธ์กฐํ๋ Closure ๊ตฌ์กฐ ์ค๊ณ
- ์ฐธ์กฐ๋ ๋ณ์๋ฅผ Stack์์ Heap ์์ญ์ผ๋ก ์ด๋์์ผ ํจ์ ์ข ๋ฃ ํ์๋ ์๋ช ์ฃผ๊ธฐ๋ฅผ ์ฐ์ฅํ๋ ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ ์ ๋ต
- ์ธ๋ถ์์ ๋ณ์์ ์ง์ ์ ๊ทผํ์ง ๋ชปํ๋๋ก Interface ํจ์๋ง ๋ ธ์ถํ๋ Data Privatization ๊ธฐ๋ฒ ์ ์ฉ
- ํน์ ์ธ์๋ฅผ ๊ณ ์ ํ ํจ์๋ฅผ ์์ฑํ๋ Function Factory ํจํด์ ํตํ ์ฝ๋ ์ฌ์ฌ์ฉ์ฑ ํ๋ณด
- Index ๊ธฐ๋ฐ์ ๋ฐฐ์ด ๊ด๋ฆฌ์ Closure๋ฅผ ๊ฒฐํฉํ์ฌ React useState์ ๊ฐ์ ์ํ ๊ด๋ฆฌ Hook ๋ฉ์ปค๋์ฆ ๊ตฌํ
์ค์ฒ ํฌ์ธํธ
1. ์ํ ์ ์ง ๋ณ์๊ฐ ํ์ํ ๊ฒฝ์ฐ ํด๋์ค ๋์ Closure๋ฅผ ํ์ฉํ ์บก์ํ ๊ฒํ
2. Heap ๋ฉ๋ชจ๋ฆฌ ํ ๋น์ผ๋ก ์ธํ ๋ฉ๋ชจ๋ฆฌ ๋์ ๊ฐ๋ฅ์ฑ์ ๊ณ ๋ คํ์ฌ ๋ถํ์ํ ์ฐธ์กฐ ์ ๊ฑฐ
3. Function Factory ํจํด์ ํตํ ๊ณ ์ฐจ ํจ์ ์ค๊ณ๋ก ์ค๋ณต ๋ก์ง ์ต์ํ