ํ”ผ๋“œ๋กœ ๋Œ์•„๊ฐ€๊ธฐ
Some basic understanding of closure๐ŸŽˆ
Dev.toDev.to
Frontend

Lexical Binding ๊ธฐ๋ฐ˜ Closure๋ฅผ ํ†ตํ•œ ์ƒํƒœ ์œ ์ง€ ๋ฐ ์บก์Аํ™” ๊ตฌํ˜„

Some basic understanding of closure๐ŸŽˆ

E_Chronosands::2026๋…„ 5์›” 12์ผ2๋ถ„beginner

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 ํŒจํ„ด์„ ํ†ตํ•œ ๊ณ ์ฐจ ํ•จ์ˆ˜ ์„ค๊ณ„๋กœ ์ค‘๋ณต ๋กœ์ง ์ตœ์†Œํ™”

์›๋ฌธ ์ฝ๊ธฐ