»ó¼¼Á¤º¸
Ã¥¼Ò°³
"<¸®¾×Æ®¸¦ ´Ù·ç´Â ±â¼ú> °³Á¤ÆÇÀÌ ³ª¿Ô½À´Ï´Ù. ¸®¾×Æ® 16.8 ¹öÀü¿¡ Hooks¶ó´Â ±â´ÉÀÌ µµÀÔµÇ¸é¼ ÇÔ¼öÇü ÄÄÆ÷³ÍÆ®¿¡¼µµ »óÅ °ü¸®¸¦ ÇÒ ¼ö ÀÖ°Ô µÇ¾ú½À´Ï´Ù. ÀÌ¿¡ ¸ÂÃç Ã¥¿¡ »ç¿ëµÈ ÁÖ¿ä ¿¹½Ã¸¦ ¸ðµÎ ÇÔ¼öÇü ÄÄÆ÷³ÍÆ® ÇüÅ·ΠÀüȯÇß½À´Ï´Ù. ±âÁ¸ ³»¿ëÀ» º¸° ¹× °³¼±Çϰí, ÃÊÆÇ¿¡ ´Ù·çÁö ¾Ê¾Ò´ø »õ·Î¿î ³»¿ëµµ ¸¹ÀÌ ¼ö·ÏÇß½À´Ï´Ù. ¸®¾×Æ®ÀÇ ºò ÆÒÀÌÀÚ Çö¾÷ ÇÁ·Î±×·¡¸Ó·Î¼ ¸®¾×Æ®¸¦ ²ÙÁØÈ÷ Ȱ¿ëÇØ ¿Â ÀúÀÚÀÇ ¸íÄèÇÑ ¼³¸í°ú ³ëÇϿ찡 ´õ¿í ¾ËÂ÷°Ô ´ã±ä °³Á¤ÆÇÀÔ´Ï´Ù.
¶ÇÇÑ, ¸®¾×Æ®¸¦ °øºÎÇÒ ¶§ ¾Ë¾Æ¾ß ÇÒ ÀÚ¹Ù½ºÅ©¸³Æ® ±âÃÊ ¹× ES6 ¹®¹ýÀ» ´Ù·é ¸µÅ©(º§·ÎÆÛÆ®¿Í ÇÔ²²ÇÏ´Â ¸ð´ø ÀÚ¹Ù½ºÅ©¸³Æ®)¿Í Ã¥¿¡¼ »ç¿ëÇÑ ¸®¾×Æ® ¶óÀ̺귯¸®¿Í °ü·Ã µµ±¸ÀÇ ¹öÀüÀÌ ¾÷±×·¹À̵åµÇ¸é ÇÊ¿äÇÑ º¯°æ »çÇ×À» °øÁöÇÏ´Â ¸µÅ©(ÀúÀÚ ±êÇãºê)µµ Á¦°øÇÕ´Ï´Ù."
ÀúÀÚ¼Ò°³
"°³¹ßÀº ¾ðÁ¦³ª Áñ°Ì°í Àç¹Õ¾î¾ß ÇÑ´Ù´Â »ý°¢À» °®°í ÀÖ´Â °³¹ßÀÚÀ̸ç, IT ±â¼úÀ» °¡¸£Ä¡´Â °ÍÀ» ±²ÀåÈ÷ ÁÁ¾ÆÇÏ´Â ±³À°ÀÚÀ̱⵵ ÇÕ´Ï´Ù. ¶ÇÇÑ, »ç¿ëÀÚ¸¦ ÇູÇÏ°Ô ¸¸µå´Â ¼ºñ½º¸¦ ¸¸µå´Â °ÍÀÌ °¡Àå Áß¿äÇÏ´Ù°í ¿©±é´Ï´Ù. ÇöÀç ¸®µð(ÁÖ)¿¡¼ ¾Ö´Ï¸ÞÀÌ¼Ç ½ºÆ®¸®¹Ö ¼ºñ½º ¶óÇÁÅÚ(laftel.net)ÀÇ ÇÁ·±Æ®¿£µå °³¹ßÀ» Çϰí ÀÖ½À´Ï´Ù. ±×¸®°í °³¹ßÀÚµéÀÇ ºí·Î±× ¼ºñ½ºÀÎ º§·Î±×(velog.io)¸¦ ¿î¿µ ¹× °³¹ßÇϰí ÀÖ½À´Ï´Ù.
ºí·Î±×: https://velog.io/@velopert
GitHub: https://github.com/velopert"
¸ñÂ÷
"1Àå ¸®¾×Æ® ½ÃÀÛ
__1.1 ¿Ö ¸®¾×Æ®Àΰ¡?
____1.1.1 ¸®¾×Æ® ÀÌÇØ
__1.2 ¸®¾×Æ®ÀÇ Æ¯Â¡
____1.2.1 Virtual DOM
____1.2.2 ±âŸ Ư¡
__1.3 ÀÛ¾÷ ȯ°æ ¼³Á¤
____1.3.1 Node.js¿Í npm
____1.3.2 yarn
____1.3.3 ¿¡µðÅÍ ¼³Ä¡
____1.3.4 Git ¼³Ä¡
____1.3.5 create-react-appÀ¸·Î ÇÁ·ÎÁ§Æ® »ý¼ºÇϱâ
2Àå JSX
__2.1 ÄÚµå ÀÌÇØÇϱâ
__2.2 JSX¶õ?
__2.3 JSXÀÇ ÀåÁ¡
____2.3.1 º¸±â ½±°í Àͼ÷ÇÏ´Ù
____2.3.2 ´õ¿í ³ôÀº Ȱ¿ëµµ
__2.4 JSX ¹®¹ý
____2.4.1 °¨½ÎÀÎ ¿ä¼Ò
____2.4.2 ÀÚ¹Ù½ºÅ©¸³Æ® Ç¥Çö
____2.4.3 If ¹® ´ë½Å Á¶°ÇºÎ ¿¬»êÀÚ
____2.4.4 AND ¿¬»êÀÚ(&&)¸¦ »ç¿ëÇÑ Á¶°ÇºÎ ·»´õ¸µ
____2.4.5 undefined¸¦ ·»´õ¸µÇÏÁö ¾Ê±â
____2.4.6 ÀζóÀÎ ½ºÅ¸Àϸµ
____2.4.7 class ´ë½Å className
____2.4.8 ²À ´Ý¾Æ¾ß Çϴ ű×
____2.4.9 ÁÖ¼®
__2.5 ESLint¿Í Prettier Àû¿ëÇϱâ
____2.5.1 ESLint
____2.5.2 Prettier
__2.6 Á¤¸®
3Àå ÄÄÆ÷³ÍÆ®
__3.1 Ŭ·¡½ºÇü ÄÄÆ÷³ÍÆ®
__3.2 ù ÄÄÆ÷³ÍÆ® »ý¼º
____3.2.1 src µð·ºÅ͸®¿¡ MyComponent.js ÆÄÀÏ »ý¼º
____3.2.2 ÄÚµå ÀÛ¼ºÇϱâ
____3.2.3 ¸ðµâ ³»º¸³»±â ¹× ºÒ·¯¿À±â
__3.3 props
____3.3.1 JSX ³»ºÎ¿¡¼ props ·»´õ¸µ
____3.3.2 ÄÄÆ÷³ÍÆ®¸¦ »ç¿ëÇÒ ¶§ props °ª ÁöÁ¤Çϱâ
____3.3.3 props ±âº»°ª ¼³Á¤: defaultProps
____3.3.4 ÅÂ±× »çÀÌÀÇ ³»¿ëÀ» º¸¿© ÁÖ´Â children
____3.3.5 ºñ±¸Á¶È ÇÒ´ç ¹®¹ýÀ» ÅëÇØ props ³»ºÎ °ª ÃßÃâÇϱâ
____3.3.6 propTypes¸¦ ÅëÇÑ props °ËÁõ
____3.3.7 Ŭ·¡½ºÇü ÄÄÆ÷³ÍÆ®¿¡¼ props »ç¿ëÇϱâ
__3.4 state
____3.4.1 Ŭ·¡½ºÇü ÄÄÆ÷³ÍÆ®ÀÇ state
____3.4.2 ÇÔ¼öÇü ÄÄÆ÷³ÍÆ®¿¡¼ useState »ç¿ëÇϱâ
__3.5 state¸¦ »ç¿ëÇÒ ¶§ ÁÖÀÇ »çÇ×
__3.6 Á¤¸®
4Àå À̺¥Æ® Çڵ鸵
__4.1 ¸®¾×Æ®ÀÇ À̺¥Æ® ½Ã½ºÅÛ
____4.1.1 À̺¥Æ®¸¦ »ç¿ëÇÒ ¶§ ÁÖÀÇ »çÇ×
____4.1.2 À̺¥Æ® Á¾·ù
__4.2 ¿¹Á¦·Î À̺¥Æ® Çڵ鸵 ÀÍÈ÷±â
____4.2.1 ÄÄÆ÷³ÍÆ® »ý¼º ¹× ºÒ·¯¿À±â
____4.2.2 onChange À̺¥Æ® Çڵ鸵Çϱâ
____4.2.3 ÀÓÀÇ ¸Þ¼µå ¸¸µé±â
____4.2.4 input ¿©·¯ °³ ´Ù·ç±â
____4.2.5 onKeyPress À̺¥Æ® Çڵ鸵
__4.3 ÇÔ¼öÇü ÄÄÆ÷³ÍÆ®·Î ±¸ÇöÇØ º¸±â
__4.4 Á¤¸®
5Àå ref: DOM¿¡ À̸§ ´Þ±â
__5.1 ref´Â ¾î¶² »óȲ¿¡¼ »ç¿ëÇØ¾ß ÇÒ±î?
____5.1.1 ¿¹Á¦ ÄÄÆ÷³ÍÆ® »ý¼º
____5.1.2 App ÄÄÆ÷³ÍÆ®¿¡¼ ¿¹Á¦ ÄÄÆ÷³ÍÆ® ·»´õ¸µ
____5.1.3 DOMÀ» ²À »ç¿ëÇØ¾ß ÇÏ´Â »óȲ
__5.2 ref »ç¿ë
____5.2.1 Äݹé ÇÔ¼ö¸¦ ÅëÇÑ ref ¼³Á¤
____5.2.2 createRef¸¦ ÅëÇÑ ref ¼³Á¤
____5.2.3 Àû¿ë
__5.3 ÄÄÆ÷³ÍÆ®¿¡ ref ´Þ±â
____5.3.1 »ç¿ë¹ý
____5.3.2 ÄÄÆ÷³ÍÆ® Ãʱ⠼³Á¤
____5.3.3 ÄÄÆ÷³ÍÆ®¿¡ ¸Þ¼µå »ý¼º
____5.3.4 ÄÄÆ÷³ÍÆ®¿¡ ref ´Þ°í ³»ºÎ ¸Þ¼µå »ç¿ë
__5.4 Á¤¸®
6Àå ÄÄÆ÷³ÍÆ® ¹Ýº¹
__6.1 ÀÚ¹Ù½ºÅ©¸³Æ® ¹è¿ÀÇ map() ÇÔ¼ö
____6.1.1 ¹®¹ý
____6.1.2 ¿¹Á¦
__6.2 µ¥ÀÌÅÍ ¹è¿À» ÄÄÆ÷³ÍÆ® ¹è¿·Î º¯È¯Çϱâ
____6"