- ÇöÀç À§Ä¡
- home > ÄÄÇ»ÅÍ¡¤ICT¡¤¾îÇÐ > ÄÄÇ»ÅÍ¡¤IT µµ¼ > À¥ÇÁ·Î±×·¡¹Ö > ¸®¾×Æ®¸¦ ´Ù·ç´Â ±â¼ú(°³Á¤ÆÇ)[±æ¹þ]
°³Á¤ÆÇÀÌ ³ª¿Ô½À´Ï´Ù. ¸®¾×Æ® 16.8 ¹öÀü¿¡ Hooks¶ó´Â ±â´ÉÀÌ µµÀÔµÇ¸é¼ ÇÔ¼öÇü ÄÄÆ÷³ÍÆ®¿¡¼µµ »óÅ °ü¸®¸¦ ÇÒ ¼ö ÀÖ°Ô µÇ¾ú½À´Ï´Ù. ÀÌ¿¡ ¸ÂÃç Ã¥¿¡ »ç¿ëµÈ ÁÖ¿ä ¿¹½Ã¸¦ ¸ðµÎ ÇÔ¼öÇü ÄÄÆ÷³ÍÆ® ÇüÅ·ΠÀüȯÇß½À´Ï´Ù. ±âÁ¸ ³»¿ëÀ» º¸° ¹× °³¼±ÇÏ°í, ÃÊÆÇ¿¡ ´Ù·çÁö ¾Ê¾Ò´ø »õ·Î¿î ³»¿ëµµ ¸¹ÀÌ ¼ö·ÏÇß½À´Ï´Ù. ¸®¾×Æ®ÀÇ ºò ÆÒÀÌÀÚ Çö¾÷ ÇÁ·Î±×·¡¸Ó·Î¼ ¸®¾×Æ®¸¦ ²ÙÁØÈ÷ È°¿ëÇØ ¿Â ÀúÀÚÀÇ ¸íÄèÇÑ ¼³¸í°ú ³ëÇÏ¿ì°¡ ´õ¿í ¾ËÂ÷°Ô ´ã±ä °³Á¤ÆÇÀÔ´Ï´Ù.
¶ÇÇÑ, ¸®¾×Æ®¸¦ °øºÎÇÒ ¶§ ¾Ë¾Æ¾ß ÇÒ ÀÚ¹Ù½ºÅ©¸³Æ® ±âÃÊ ¹× ES6 ¹®¹ýÀ» ´Ù·é ¸µÅ©(º§·ÎÆÛÆ®¿Í ÇÔ²²ÇÏ´Â ¸ð´ø ÀÚ¹Ù½ºÅ©¸³Æ®)¿Í Ã¥¿¡¼ »ç¿ëÇÑ ¸®¾×Æ® ¶óÀ̺귯¸®¿Í °ü·Ã µµ±¸ÀÇ ¹öÀüÀÌ ¾÷±×·¹À̵åµÇ¸é ÇÊ¿äÇÑ º¯°æ »çÇ×À» °øÁöÇÏ´Â ¸µÅ©(ÀúÀÚ ±êÇãºê)µµ Á¦°øÇÕ´Ï´Ù.
¶ÇÇÑ, ¸®¾×Æ®¸¦ °øºÎÇÒ ¶§ ¾Ë¾Æ¾ß ÇÒ ÀÚ¹Ù½ºÅ©¸³Æ® ±âÃÊ ¹× ES6 ¹®¹ýÀ» ´Ù·é ¸µÅ©(º§·ÎÆÛÆ®¿Í ÇÔ²²ÇÏ´Â ¸ð´ø ÀÚ¹Ù½ºÅ©¸³Æ®)¿Í Ã¥¿¡¼ »ç¿ëÇÑ ¸®¾×Æ® ¶óÀ̺귯¸®¿Í °ü·Ã µµ±¸ÀÇ ¹öÀüÀÌ ¾÷±×·¹À̵åµÇ¸é ÇÊ¿äÇÑ º¯°æ »çÇ×À» °øÁöÇÏ´Â ¸µÅ©(ÀúÀÚ ±êÇãºê)µµ Á¦°øÇÕ´Ï´Ù.
ÀúÀÚ: ±è¹ÎÁØ
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 ¿¬»êÀÚ(
__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 ¿¬»êÀÚ(