๋ฐ˜์‘ํ˜•

TypeScript ์Šคํ„ฐ๋”” 1

[TypeScript] cannot read properties of undefined ์—๋Ÿฌ ์›์ธ ๋ฐ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•

Intro ์•ˆ๋…•ํ•˜์„ธ์š”. ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋˜ ๋„์ค‘ ์•„๋ž˜์™€ ๊ฐ™์€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. Why? ํ•ด๋‹น properties์˜ ๊ฐ’์„ ์ฝ์„ ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— ๋ฐœ์ƒํ•˜๋Š” ์˜ค๋ฅ˜์ž…๋‹ˆ๋‹ค. How to solve the problem ํ•ด๋‹น ์—๋Ÿฌ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์—ฌ๋Ÿฌ๊ฐ€์ง€์ธ๋ฐ์š”, ์ €๋Š” ๊ทธ ์ค‘์—์„œ๋„ Optional Chaining ์—ฐ์‚ฐ์ž (๋ฌผ์Œํ‘œ ์—ฐ์‚ฐ์ž)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•ด๋‹น ์˜ค๋ฅ˜๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ฝ”๋“œ ์‚ฌ์šฉ ์˜ˆ์ œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. return ( {item?.name} ) ์ด๋ ‡๊ฒŒ Optional Chaining ์—ฐ์‚ฐ์ž (๋ฌผ์Œํ‘œ ์—ฐ์‚ฐ์ž)๋ฅผ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ์œ ํšจํ•œ ๊ฐ’์ด ์—†์„ ๋•Œ๋Š” undefined๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ , ๊ฐ’์ด ์žˆ์„ ๋•Œ๋Š” Optional Chaining ์—ฐ์‚ฐ์ž ์ดํ›„ ๋‚ด์šฉ์„ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ํ•ด๋‹น ์˜ค๋ฅ˜๋ฅผ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฐ˜์‘ํ˜•