[ํ”„๋ก ํŠธ์—”๋“œ ์ƒ์กด์ฝ”์Šค 10๊ธฐ] 3์ฃผ์ฐจ ํšŒ๊ณ 

2024. 2. 19. 00:52ใ†Education/Megaptera

๐Ÿ“…  24.02.12 ~ 24.02.18 

์ด๋ฒˆ์ฃผ๋Š” React ๊ณต์‹ ๋ฌธ์„œ์— ์†Œ๊ฐœ๋œ Thinking in React ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์ฝ”๋“œ ์‹ค์Šตํ•˜๋ฉด์„œ 
Component, Props, State์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•˜๋Š” ์ฃผ์ฐจ์˜€๋‹ค. 
TypeScript ์‚ฌ์šฉํ•ด์„œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ–ˆ๊ณ , ์ต์ˆ™ํ•˜์ง€ ์•Š์•„ ๊ฐ•์˜ ์—ฌ๋Ÿฌ ๋ฒˆ ๋“ค์–ด์•ผ ํ–ˆ๋‹ค.

 

๐Ÿ“š ํ•™์Šต์„ ํ†ตํ•ด ๋ฌด์—‡์„ ๋ฐฐ์› ๋Š”๊ฐ€? 

 

1๏ธโƒฃ TypeScript 

์ฝ”๋“œ ์‹ค์Šต์„ ํ†ตํ•ด TypeScript ์‚ฌ์šฉํ•ด ๋ณด์•˜๋‹ค.

๋Œ€๋žต ์‚ฌ์šฉ๋ฒ•๋งŒ ์ˆ™์ง€ํ•œ ์ƒํƒœ์—ฌ์„œ ๊ทธ๋Ÿฐ์ง€ ์ฝ”๋“œ๋ฅผ ์ดํ•ดํ•˜๋Š” ๋ถ€๋ถ„์— ์žˆ์–ด์„œ ์–ด์ƒ‰ํ–ˆ๊ณ  

ํ—ค๋งค๋Š” ๋ถ€๋ถ„๋“ค์ด ๋งŽ์•„ ๊ฐ•์˜๋ฅผ ์—ฌ๋Ÿฌ ๋ฒˆ ๋“ค์–ด์•ผ ํ–ˆ๋‹ค. ๊ธฐ์ดˆ ๋ฌธ๋ฒ• ๊ณต๋ถ€๊ฐ€ ํ•„์š”ํ•˜๋‹ค๊ณ  ๋Š๊ผˆ๋‹ค.

React๋„ ์•„์ง ์ต์ˆ™์ง€ ์•Š์€๋ฐ, Type๊นŒ์ง€ ์ง€์ •ํ•ด์„œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ ค๊ณ  ํ•˜๋‹ˆ, ์–ด๋ ต๊ฒŒ ๋Š๊ปด์กŒ๋‹ค.

๊ณผ์ œ๋ฅผ ํ•˜๋ฉด์„œ ํƒ€์ž…์„ ์ง€์ •ํ•˜๊ณ  ํŒŒ์ผ์„ ๋ถ„๋ฆฌํ•˜๋Š” ๊ณผ์ •์—์„œ ์ŠคํŠธ๋ ˆ์Šค๋ฅผ ๋ฐ›์•˜๊ณ  

React๋งŒ ์‚ฌ์šฉํ•ด ๊ตฌํ˜„ํ•˜๋Š” ์ฝ”๋“œ๋Š” ์ž‘์„ฑํ–ˆ์œผ๋‚˜ ํƒ€์ž…๊นŒ์ง€ ์ง€์ •ํ•ด์„œ 

์ž‘์„ฑํ•˜๋ ค๊ณ  ํ•˜๋‹ˆ ์˜ค๋ฅ˜๋“ค์ด ๋งŽ์ด ๋ฐœ์ƒํ•˜์˜€๊ณ , ์ด์œ ๊ฐ€ ์ •ํ™•ํžˆ ๋ญ”์ง€ ์•Œ ์ˆ˜ ์—†์–ด 

๊ฐ•์˜๋ฅผ ๋‹ค์‹œ ๋“ฃ๊ณ  ์ •๋ฆฌ๊ฐ€ ํ•„์š”ํ•ด ๋ณด์—ฌ ์ œ์ถœ์€ ๊ธฐ๊ฐ„ ๋‚ด์— ๋ชป ํ•  ๊ฑฐ ๊ฐ™๋‹ค๊ณ  ํŒ๋‹จ๋˜์—ˆ๋‹ค.

 

2๏ธโƒฃ ๋ฆฌํŒฉํ† ๋ง ๊ณผ์ •

๊ฐ•์˜๋ฅผ ๋“ค์„ ๋• ํ•จ์ˆ˜๋ฅผ ๋ถ„๋ฆฌํ•˜๊ณ  ํƒ€์ž…์„ ๋ถ„๋ฆฌํ•˜๋Š” ๊ณผ์ •์ด ์‰ฌ์›Œ ๋ณด์˜€๋Š”๋ฐ 

๋ง‰์ƒ ๊ณผ์ œ๋ฅผ ํ•˜๋ฉด์„œ ๊ตฌํ˜„ํ•ด ๋ณด๋‹ˆ๊น ์‰ฝ์ง€ ์•Š์•˜๋‹ค.

๊ณต์œ ํ•˜๋Š” state์™€ ํ•„๋”๋ง ํ•ด์„œ ๋ฆฌ์ŠคํŠธ๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๋กœ์ง์„ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒŒ ์‰ฝ์ง€ ์•Š์•˜๊ณ 

์ปดํฌ๋„ŒํŠธ๋„ ๋ถ„๋ฆฌํ•˜๋Š” ๊ณผ์ •๊ณผ props์˜ type์„ ๋งค์นญํ•˜๋Š” ์ž‘์—…์ด ์ต์ˆ™์ง€ ์•Š์•˜๋‹ค.

์–ด๋ ค์šด ๊ณผ์ œ๋„ ์•„๋‹ˆ์—ˆ๋Š”๋ฐ.. ๋ง‰์ƒ ๊ตฌํ˜„ํ•˜๋ ค๋‹ˆ ์ƒ๊ฐ๋งŒํผ ์‰ฝ์ง€ ์•Š์•˜๋‹ค. 

 

 

๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป ๋‚˜๋Š” ์ด๋ฒˆ์ฃผ์— ์–ด๋–ค ์„ฑ์žฅ์„ ํ•˜์˜€๋Š”๊ฐ€? 

์„ค๋‚  ์—ฐํœด์— ํœด์‹์„ ์ทจํ–ˆ์ง€๋งŒ, ๊ฐ๊ธฐ๋กœ ์ธํ•ด ์ด๋ฒˆ์ฃผ๋Š” ๊ณต๋ถ€๋ฅผ ์ œ๋Œ€๋กœ ํ•˜์ง€ ๋ชปํ–ˆ๋‹ค. 

์•ฝ๊ธฐ์šด์— ์ž๊พธ ์ž ์ด ์˜ค๊ณ  ๊ฐ•์˜๋ฅผ ๋“ค์–ด๋„ ์ง‘์ค‘๋ ฅ ์žˆ๊ฒŒ ๋“ฃ์ง€ ๋ชปํ•ด ๊ณ„์† ๋ฐ˜๋ณตํ•ด์„œ ๋“ค์–ด์•ผ ํ–ˆ๋‹ค.

Gitbook์˜ ๊ฐœ๋…์ •๋ฆฌ๋„ ๊ฒจ์šฐ ์ œ์ถœํ–ˆ๊ณ , React์˜ ๊ทผ๋ณธ์ ์ธ ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•˜๋Š”๋ฐ ์–ด๋ ค์› ๋‹ค. 

๊ณผ์ œ๋Š” TypeScript๋กœ ํƒ€์ž…์„ ์ง€์ •ํ•˜๋Š” ๊ณผ์ •์—์„œ ์ŠคํŠธ๋ ˆ์Šค๋ฅผ ๋ฐ›์•„ ์ œ์ถœํ•˜์ง€ ์•Š์•˜๋‹ค. 

์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด์„œ React๋„ ์ต์ˆ™ํ•˜์ง€ ์•Š๊ณ , TypeScript๋Š” ๋” ๋ชจ๋ฅด๊ฒ ๊ณ  ๋ชธ์€ ๋”ฐ๋ผ์ฃผ์ง€ ์•Š์œผ๋‹ˆ 

์ง‘์ค‘๋ ฅ ์žˆ๊ฒŒ ๊ณต๋ถ€ํ•˜์ง€ ๋ชปํ–ˆ๊ณ , ๊ธฐ๊ฐ„ ๋‚ด์—๋Š” ์ œ์ถœํ•˜์ง€ ๋ชปํ•  ๊ฑฐ ๊ฐ™์•„ ๊ณผ์ œ๋Š” ๋” ํ•™์Šตํ•œ ํ›„์— ์ œ์ถœํ•  ์˜ˆ์ •์ด๋‹ค. 

React๋ฅผ ๋น ๋ฅด๊ฒŒ ์ˆ™์ง€ํ•ด์„œ ์‚ฌ์ดํŠธ ํ”„๋กœ์ ํŠธ์— ์ฐธ์—ฌํ•˜๊ณ  ์‹ถ์€๋ฐ ๊ณต๋ถ€ ์†๋„๊ฐ€ ๋”ฐ๋ผ์ฃผ์ง€ ์•Š์œผ๋‹ˆ, 

๋‹ต๋‹ตํ•˜๊ณ  ์ƒ๊ฐ์ด ๋งŽ์•˜๋˜ ํ•œ ์ฃผ์˜€๋‹ค.