- ÇöÀç À§Ä¡
- home > ÄÄÇ»ÅÍ¡¤ICT¡¤¾îÇÐ > ÄÄÇ»ÅÍ¡¤IT µµ¼ > À¥ÇÁ·Î±×·¡¹Ö > ¼ÒÇÃÀÇ Ã³À½ ¸¸³ ¸®¾×Æ®[ÇѺû¹Ìµð¾î]
¼ÒÇÃÀÇ Ã³À½ ¸¸³ ¸®¾×Æ® - ÀÌÀÎÁ¦ ÁöÀ½
¸®¾×Æ® ±âÃÊ °³³äÀ» ¹è¿ì°í °£´ÜÇÑ ½Ç½ÀÀ» µû¶ó ÇÏ¸ç »ç¿ë¹ýÀ» ÀÍÈ÷´Â °¡Àå ½¬¿î ÀÔ¹®¼. ÀÌ Ã¥Àº ¿ÀǼҽº ÀÚ¹Ù½ºÅ©¸³Æ® ¶óÀ̺귯¸®ÀÎ ¸®¾×Æ®¸¦ óÀ½ ¹è¿ì´Â °³¹ßÀÚ¸¦ À§ÇÑ Ã¥ÀÌ´Ù.
¸®¾×Æ® ±âÃÊ °³³äÀ» ¹è¿ì°í °£´ÜÇÑ ½Ç½ÀÀ» µû¶ó ÇÏ¸ç »ç¿ë¹ýÀ» ÀÍÈ÷´Â °¡Àå ½¬¿î ÀÔ¹®¼. ÀÌ Ã¥Àº ¿ÀǼҽº ÀÚ¹Ù½ºÅ©¸³Æ® ¶óÀ̺귯¸®ÀÎ ¸®¾×Æ®¸¦ óÀ½ ¹è¿ì´Â °³¹ßÀÚ¸¦ À§ÇÑ Ã¥ÀÌ´Ù.
ÀúÀÚ: ÀÌÀÎÁ¦ ÁöÀ½
0Àå ÁغñÇϱâ
0.1 HTML »ìÆ캸±â
0.2 CSS¶õ ¹«¾ùÀΰ¡?
0.3 ÀÚ¹Ù½ºÅ©¸³Æ®
0.4 °³¹ß ȯ°æ ¼³Á¤Çϱâ
0.5 ¸¶Ä¡¸ç
1Àå ¸®¾×Æ® ¼Ò°³
1.1 ¸®¾×Æ®´Â ¹«¾ùÀΰ¡?
1.2 ¸®¾×Æ®ÀÇ ÀåÁ¡
1.3 ¸®¾×Æ®ÀÇ ´ÜÁ¡
1.4 ¸¶Ä¡¸ç
2Àå ¸®¾×Æ® ½ÃÀÛÇϱâ
2.1 HTML¸¸À¸·Î °£´ÜÇÑ À¥»çÀÌÆ® ¸¸µé±â
2.2 CSS¸¦ »ç¿ëÇÏ¿© À¥»çÀÌÆ® ½ºÅ¸ÀϸµÇϱâ
2.3 À¥»çÀÌÆ®¿¡ React.js Ãß°¡Çϱâ
2.4 create-react-app
2.5 ¸¶Ä¡¸ç
3Àå JSX ¼Ò°³
3.1 JSX¶õ?
3.2 JSXÀÇ ¿ªÇÒ
3.3 JSXÀÇ ÀåÁ¡
3.4 JSX »ç¿ë¹ý
3.5 JSX ÄÚµå ÀÛ¼ºÇØ º¸±â
3.6 ¸¶Ä¡¸ç
4Àå ¿¤¸®¸ÕÆ® ·»´õ¸µ
4.1 ¿¤¸®¸ÕÆ®¿¡ ´ëÇØ ¾Ë¾Æº¸±â
4.2 ¿¤¸®¸ÕÆ® ·»´õ¸µÇϱâ
4.3 ·»´õ¸µµÈ ¿¤¸®¸ÕÆ® ¾÷µ¥ÀÌÆ®Çϱâ
4.4 ½Ã°è ¸¸µé±â
4.5 ¸¶Ä¡¸ç
5Àå ÄÄÆ÷³ÍÆ®¿Í Props
5.1 ÄÄÆ÷³ÍÆ®¿¡ ´ëÇØ ¾Ë¾Æº¸±â
5.2 Props¿¡ ´ëÇØ ¾Ë¾Æº¸±â
5.3 ÄÄÆ÷³ÍÆ® ¸¸µé±â
5.4 ÄÄÆ÷³ÍÆ® ÇÕ¼º
5.5 ÄÄÆ÷³ÍÆ® ÃßÃâ
5.6 ´ñ±Û ÄÄÆ÷³ÍÆ® ¸¸µé±â
5.7 ¸¶Ä¡¸ç
6Àå State¿Í »ý¸íÁÖ±â
6.1 State
6.2 »ý¸íÁֱ⿡ ´ëÇØ ¾Ë¾Æº¸±â
6.3 State¿Í »ý¸íÁÖ±â ÇÔ¼ö »ç¿ëÇϱâ
6.4 ¸¶Ä¡¸ç
7Àå ÈÅ
7.1 ÈÅÀ̶õ ¹«¾ùÀΰ¡?
7.2 useState
7.3 useEffect
7.4 useMemo
7.5 useCallback
7.6 useRef
7.7 ÈÅÀÇ ±ÔÄ¢
7.8 ³ª¸¸ÀÇ ÈÅ ¸¸µé±â
7.9 ÈÅÀ» »ç¿ëÇÑ ÄÄÆ÷³ÍÆ® °³¹ß
7.10 ¸¶Ä¡¸ç
8Àå À̺¥Æ® Çڵ鸵
8.1 À̺¥Æ® ó¸®Çϱâ
8.2 Arguments Àü´ÞÇϱâ
8.3 Ŭ¸¯ À̺¥Æ® ó¸®Çϱâ
8.4 ¸¶Ä¡¸ç
9Àå Á¶°ÇºÎ ·»´õ¸µ
9.1 Á¶°ÇºÎ ·»´õ¸µÀ̶õ?
9.2 ¿¤¸®¸ÕÆ® º¯¼ö
9.3 ÀζóÀÎ Á¶°Ç
9.4 ÄÄÆ÷³ÍÆ® ·»´õ¸µ ¸·±â
9.5 ·Î±×ÀÎ ¿©ºÎ¸¦ ³ªÅ¸³»´Â Åø¹Ù ¸¸µé±â
9.6 ¸¶Ä¡¸ç
10Àå ¸®½ºÆ®¿Í Å°
10.1 ¸®½ºÆ®¿Í Å°¶õ ¹«¾ùÀΰ¡?
10.2 ¿©·¯ °³ÀÇ ÄÄÆ÷³ÍÆ® ·»´õ¸µÇϱâ
10.3 ±âº»ÀûÀÎ ¸®½ºÆ® ÄÄÆ÷³ÍÆ®
10.4 ¸®½ºÆ®ÀÇ Å°¿¡ ´ëÇØ ¾Ë¾Æº¸±â
10.5 Ãâ¼®ºÎ Ãâ·ÂÇϱâ
10.6 ¸¶Ä¡¸ç
11Àå Æû
11.1 ÆûÀ̶õ ¹«¾ùÀΰ¡?
11.2 Á¦¾î ÄÄÆ÷³ÍÆ®
11.3 textarea ű×
11.4 select ű×
11.5 File input ű×
11.6 ¿©·¯ °³ÀÇ ÀÔ·Â ´Ù·ç±â
11.7 Input Null Value
11.8 »ç¿ëÀÚ Á¤º¸ ÀԷ¹ޱâ
11.9 ¸¶Ä¡¸ç
12Àå State ²ø¾î¿Ã¸®±â
12.1 Shared State
12.2 ÇÏÀ§ ÄÄÆ÷³ÍÆ®¿¡¼ State °øÀ¯Çϱâ
12.3 ¼·¾¾¿Âµµ¿Í Ⱦ¾¿Âµµ Ç¥½ÃÇϱâ
12.4 ¸¶Ä¡¸ç
13Àå ÇÕ¼º vs. »ó¼Ó
13.1 ÇÕ¼º¿¡ ´ëÇØ ¾Ë¾Æº¸±â
13.2 »ó¼Ó¿¡ ´ëÇØ ¾Ë¾Æº¸±â
13.3 Card ÄÄÆ÷³ÍÆ® ¸¸µé±â
13.4 ¸¶Ä¡¸ç
14Àå ÄÁÅؽºÆ®
14.1 ÄÁÅؽºÆ®¶õ ¹«¾ùÀΰ¡?
14.2 ¾ðÁ¦ ÄÁÅؽºÆ®¸¦ »ç¿ëÇØ¾ß ÇÒ±î?
14.3 ÄÁÅؽºÆ®¸¦ »ç¿ëÇϱâ Àü¿¡ °í·ÁÇÒ Á¡
14.4 ÄÁÅؽºÆ® API
14.5 ¿©·¯ °³ÀÇ ÄÁÅؽºÆ® »ç¿ëÇϱâ
14.6 useContext
14.7 ÄÁÅؽºÆ®¸¦ »ç¿ëÇÏ¿© Å׸¶ º¯°æ ±â´É ¸¸µé±â
14.8 ¸¶Ä¡¸ç
15Àå ½ºÅ¸Àϸµ
15.1 CSS
15.2 styled-components
15.3 styled-components¸¦ »ç¿ëÇÏ¿© ½ºÅ¸ÀϸµÇØ º¸±â
15.4 ¸¶Ä¡¸ç
16Àå ¹Ì´Ï ÇÁ·ÎÁ§Æ®_¹Ì´Ï ºí·Î±× ¸¸µé±â
16.1 ¹Ì´Ï ºí·Î±× ±âȹÇϱâ
16.2 ÇÁ·ÎÁ§Æ® »ý¼ºÇϱâ
16.3 ÇÊ¿äÇÑ ÆÐÅ°Áö ¼³Ä¡Çϱâ
16.4 ÁÖ¿ä ÄÄÆ÷³ÍÆ® ±¸¼ºÇϱâ
16.5 Æú´õ ±¸¼ºÇϱâ
16.6 UI ÄÄÆ÷³ÍÆ® ±¸ÇöÇϱâ
16.7 List ÄÄÆ÷³ÍÆ® ±¸ÇöÇϱâ
0.1 HTML »ìÆ캸±â
0.2 CSS¶õ ¹«¾ùÀΰ¡?
0.3 ÀÚ¹Ù½ºÅ©¸³Æ®
0.4 °³¹ß ȯ°æ ¼³Á¤Çϱâ
0.5 ¸¶Ä¡¸ç
1Àå ¸®¾×Æ® ¼Ò°³
1.1 ¸®¾×Æ®´Â ¹«¾ùÀΰ¡?
1.2 ¸®¾×Æ®ÀÇ ÀåÁ¡
1.3 ¸®¾×Æ®ÀÇ ´ÜÁ¡
1.4 ¸¶Ä¡¸ç
2Àå ¸®¾×Æ® ½ÃÀÛÇϱâ
2.1 HTML¸¸À¸·Î °£´ÜÇÑ À¥»çÀÌÆ® ¸¸µé±â
2.2 CSS¸¦ »ç¿ëÇÏ¿© À¥»çÀÌÆ® ½ºÅ¸ÀϸµÇϱâ
2.3 À¥»çÀÌÆ®¿¡ React.js Ãß°¡Çϱâ
2.4 create-react-app
2.5 ¸¶Ä¡¸ç
3Àå JSX ¼Ò°³
3.1 JSX¶õ?
3.2 JSXÀÇ ¿ªÇÒ
3.3 JSXÀÇ ÀåÁ¡
3.4 JSX »ç¿ë¹ý
3.5 JSX ÄÚµå ÀÛ¼ºÇØ º¸±â
3.6 ¸¶Ä¡¸ç
4Àå ¿¤¸®¸ÕÆ® ·»´õ¸µ
4.1 ¿¤¸®¸ÕÆ®¿¡ ´ëÇØ ¾Ë¾Æº¸±â
4.2 ¿¤¸®¸ÕÆ® ·»´õ¸µÇϱâ
4.3 ·»´õ¸µµÈ ¿¤¸®¸ÕÆ® ¾÷µ¥ÀÌÆ®Çϱâ
4.4 ½Ã°è ¸¸µé±â
4.5 ¸¶Ä¡¸ç
5Àå ÄÄÆ÷³ÍÆ®¿Í Props
5.1 ÄÄÆ÷³ÍÆ®¿¡ ´ëÇØ ¾Ë¾Æº¸±â
5.2 Props¿¡ ´ëÇØ ¾Ë¾Æº¸±â
5.3 ÄÄÆ÷³ÍÆ® ¸¸µé±â
5.4 ÄÄÆ÷³ÍÆ® ÇÕ¼º
5.5 ÄÄÆ÷³ÍÆ® ÃßÃâ
5.6 ´ñ±Û ÄÄÆ÷³ÍÆ® ¸¸µé±â
5.7 ¸¶Ä¡¸ç
6Àå State¿Í »ý¸íÁÖ±â
6.1 State
6.2 »ý¸íÁֱ⿡ ´ëÇØ ¾Ë¾Æº¸±â
6.3 State¿Í »ý¸íÁÖ±â ÇÔ¼ö »ç¿ëÇϱâ
6.4 ¸¶Ä¡¸ç
7Àå ÈÅ
7.1 ÈÅÀ̶õ ¹«¾ùÀΰ¡?
7.2 useState
7.3 useEffect
7.4 useMemo
7.5 useCallback
7.6 useRef
7.7 ÈÅÀÇ ±ÔÄ¢
7.8 ³ª¸¸ÀÇ ÈÅ ¸¸µé±â
7.9 ÈÅÀ» »ç¿ëÇÑ ÄÄÆ÷³ÍÆ® °³¹ß
7.10 ¸¶Ä¡¸ç
8Àå À̺¥Æ® Çڵ鸵
8.1 À̺¥Æ® ó¸®Çϱâ
8.2 Arguments Àü´ÞÇϱâ
8.3 Ŭ¸¯ À̺¥Æ® ó¸®Çϱâ
8.4 ¸¶Ä¡¸ç
9Àå Á¶°ÇºÎ ·»´õ¸µ
9.1 Á¶°ÇºÎ ·»´õ¸µÀ̶õ?
9.2 ¿¤¸®¸ÕÆ® º¯¼ö
9.3 ÀζóÀÎ Á¶°Ç
9.4 ÄÄÆ÷³ÍÆ® ·»´õ¸µ ¸·±â
9.5 ·Î±×ÀÎ ¿©ºÎ¸¦ ³ªÅ¸³»´Â Åø¹Ù ¸¸µé±â
9.6 ¸¶Ä¡¸ç
10Àå ¸®½ºÆ®¿Í Å°
10.1 ¸®½ºÆ®¿Í Å°¶õ ¹«¾ùÀΰ¡?
10.2 ¿©·¯ °³ÀÇ ÄÄÆ÷³ÍÆ® ·»´õ¸µÇϱâ
10.3 ±âº»ÀûÀÎ ¸®½ºÆ® ÄÄÆ÷³ÍÆ®
10.4 ¸®½ºÆ®ÀÇ Å°¿¡ ´ëÇØ ¾Ë¾Æº¸±â
10.5 Ãâ¼®ºÎ Ãâ·ÂÇϱâ
10.6 ¸¶Ä¡¸ç
11Àå Æû
11.1 ÆûÀ̶õ ¹«¾ùÀΰ¡?
11.2 Á¦¾î ÄÄÆ÷³ÍÆ®
11.3 textarea ű×
11.4 select ű×
11.5 File input ű×
11.6 ¿©·¯ °³ÀÇ ÀÔ·Â ´Ù·ç±â
11.7 Input Null Value
11.8 »ç¿ëÀÚ Á¤º¸ ÀԷ¹ޱâ
11.9 ¸¶Ä¡¸ç
12Àå State ²ø¾î¿Ã¸®±â
12.1 Shared State
12.2 ÇÏÀ§ ÄÄÆ÷³ÍÆ®¿¡¼ State °øÀ¯Çϱâ
12.3 ¼·¾¾¿Âµµ¿Í Ⱦ¾¿Âµµ Ç¥½ÃÇϱâ
12.4 ¸¶Ä¡¸ç
13Àå ÇÕ¼º vs. »ó¼Ó
13.1 ÇÕ¼º¿¡ ´ëÇØ ¾Ë¾Æº¸±â
13.2 »ó¼Ó¿¡ ´ëÇØ ¾Ë¾Æº¸±â
13.3 Card ÄÄÆ÷³ÍÆ® ¸¸µé±â
13.4 ¸¶Ä¡¸ç
14Àå ÄÁÅؽºÆ®
14.1 ÄÁÅؽºÆ®¶õ ¹«¾ùÀΰ¡?
14.2 ¾ðÁ¦ ÄÁÅؽºÆ®¸¦ »ç¿ëÇØ¾ß ÇÒ±î?
14.3 ÄÁÅؽºÆ®¸¦ »ç¿ëÇϱâ Àü¿¡ °í·ÁÇÒ Á¡
14.4 ÄÁÅؽºÆ® API
14.5 ¿©·¯ °³ÀÇ ÄÁÅؽºÆ® »ç¿ëÇϱâ
14.6 useContext
14.7 ÄÁÅؽºÆ®¸¦ »ç¿ëÇÏ¿© Å׸¶ º¯°æ ±â´É ¸¸µé±â
14.8 ¸¶Ä¡¸ç
15Àå ½ºÅ¸Àϸµ
15.1 CSS
15.2 styled-components
15.3 styled-components¸¦ »ç¿ëÇÏ¿© ½ºÅ¸ÀϸµÇØ º¸±â
15.4 ¸¶Ä¡¸ç
16Àå ¹Ì´Ï ÇÁ·ÎÁ§Æ®_¹Ì´Ï ºí·Î±× ¸¸µé±â
16.1 ¹Ì´Ï ºí·Î±× ±âȹÇϱâ
16.2 ÇÁ·ÎÁ§Æ® »ý¼ºÇϱâ
16.3 ÇÊ¿äÇÑ ÆÐÅ°Áö ¼³Ä¡Çϱâ
16.4 ÁÖ¿ä ÄÄÆ÷³ÍÆ® ±¸¼ºÇϱâ
16.5 Æú´õ ±¸¼ºÇϱâ
16.6 UI ÄÄÆ÷³ÍÆ® ±¸ÇöÇϱâ
16.7 List ÄÄÆ÷³ÍÆ® ±¸ÇöÇϱâ
±âÃÊÀûÀÎ ³»¿ë À§ÁÖ·Î ºü¸£°í ½±°Ô ¸¸³ª´Â ¸®¾×Æ®!
¸®¾×Æ®´Â ¿ÀǼҽº ÀÚ¹Ù½ºÅ©¸³Æ® UI ¶óÀ̺귯¸®ÀÔ´Ï´Ù. ÃÖ±Ù À¥»çÀÌÆ®(¶Ç´Â À¥ ¾ÖÇø®ÄÉÀ̼Ç)ÀÇ ±Ô¸ð°¡ Ä¿Áü¿¡ µû¶ó ¼ö¸¹Àº ÆäÀÌÁö¸¦ ¸¸µé¾î °ü¸®ÇÏ´Â °ÍÀº ¸Å¿ì ¾î·Æ½À´Ï´Ù. µû¶ó¼ º¹ÀâÇÑ À¥»çÀÌÆ®¸¦ ½±°í ºü¸£°Ô ±¸Çö ¹× °ü¸®ÇÒ ¼ö ÀÖµµ·Ï µµ¿ÍÁÖ´Â °ÍÀÌ ¸®¾×Æ®ÀÔ´Ï´Ù. ÀÌ Ã¥Àº ¸®¾×Æ®ÀÇ ÁÖ¿ä °³³äÀ» ÀÍÈ÷°í °£´ÜÇÑ ½Ç½ÀÀ» ÅëÇØ ½ÇÁ¦ À¥»çÀÌÆ®¿¡ ¸®¾×Æ®¸¦ Àû¿ëÇØ º¸¸ç ÇнÀÇÒ ¼ö ÀÖµµ·Ï ±¸¼ºµÇ¾î ÀÖ½À´Ï´Ù.
¡Ú ÀÌ Ã¥¿¡¼ ¹è¿ì´Â ³»¿ë
¡î ÇÊ¿äÇÑ ±âÃÊ Áö½Ä ¹× °³¹ß ȯ°æ
¡î ¸®¾×Æ® ¼Ò°³ ¹× Áغñ
¡î JSX
¡î ¿¤¸®¸ÕÆ® ·»´õ¸µ
¡î ÄÄÆ÷³ÍÆ®¿Í Props
¡î state¿Í »ý¸íÁÖ±â
¡î ÈÅ
¡î À̺¥Æ® Çڵ鸵
¡î Á¶°ÇºÎ ·»´õ¸µ
¡î ¸®½ºÆ®¿Í Å°
¡î Æû
¡î State ²ø¾î¿Ã¸®±â
¡î ÇÕ¼º°ú »ó¼Ó
¡î ÄÁÅؽºÆ®
¡î ½ºÅ¸Àϸµ
¡î ¹Ì´Ï ºí·Î±× ¸¸µé±â
¡Ú ÀÌ Ã¥ÀÇ ±¸¼º
0ÀåÀº ¸®¾×Æ®¸¦ ¹è¿ì±â Àü¿¡ ¾Ë¾Æ¾ß ÇÒ ±âÃÊ Áö½Ä°ú ½Ç½ÀÀ» ÁøÇàÇÒ °³¹ß ȯ°æ ¼³Á¤¿¡ ´ëÇØ ¼³¸íÇÕ´Ï´Ù. 1~2ÀåÀº ¸®¾×Æ®ÀÇ ±âº» °³³ä°ú Àå´ÜÁ¡¿¡ ´ëÇØ ¹è¿ì°í °£´ÜÇÑ ½Ç½ÀÀ» ÅëÇØ ¸®¾×Æ®¸¦ Àû¿ëÇØ º¾´Ï´Ù.
3ÀåºÎÅÍ 14Àå±îÁö´Â ¸®¾×Æ®ÀÇ °¢ ¿ä¼Òº° ±â´É¿¡ ´ëÇØ ¼³¸íÇÕ´Ï´Ù. °¢ éÅÍÀÇ Àü¹ÝºÎ´Â ÇØ´ç éÅÍ¿¡¼ ¹è¿ì°íÀÚ ÇÏ´Â ¸®¾×Æ®ÀÇ °¢ ¿ä¼Òº° ±âº» °³³äÀ» ¼³¸íÇÕ´Ï´Ù. ÇØ´ç éÅÍÀÇ ÈĹݺο¡´Â ¾Õ¿¡¼ ¹è¿î ±âº» ³»¿ëÀ» ¹ÙÅÁÀ¸·Î ½Ç½ÀÀ» ÅëÇØ ½ÇÁ¦ ¸®¾×Æ® »ç¿ë¹ýÀ» ÀÍÈ÷´Â ÇнÀ ÇüÅ·Π±¸¼ºµÇ¾î ÀÖ½À´Ï´Ù.
15Àå¿¡¼´Â ½ºÅ¸ÀϸµÀ» Çϱâ À§ÇØ CSSÀÇ ±âº»ÀûÀÎ ¹®¹ý°ú ¼±ÅÃÀÚ¿¡ ´ëÇØ ¹è¿ì°í styled-components¸¦ ´Ù·ç´Â ¹ýÀ» °£´ÜÇÏ°Ô ¹è¿ó´Ï´Ù.
16Àå¿¡¼´Â ¾Õ¿¡¼ ¹è¿î ³»¿ëÀ» Åä´ë·Î ¹Ì´Ï ºí·Î±×¸¦ Á÷Á¢ ¸¸µé¾î º¾´Ï´Ù. ÇÁ·ÎÁ§Æ® »ý¼ººÎÅÍ °¢Á¾ ÄÄÆ÷³ÍÆ®¸¦ ¸ðµÎ Á÷Á¢ Äڵ带 ÀÛ¼ºÇÏ¸ç °³¹ßÇØ º¾´Ï´Ù.
¡Ú ´ë»ó µ¶ÀÚ
ÀÌ Ã¥Àº ¸®¾×Æ®¸¦ óÀ½ Á¢ÇÏ´Â ÀÔ¹®ÀÚ¸¦ ´ë»óÀ¸·Î ÇÕ´Ï´Ù. HTML°ú ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ´Ù·ïº» °æÇèÀÌ ÀÖ´Ù¸é ¼ö¿ùÇÏ°Ô ÀÌ Ã¥ÀÇ °úÁ¤À» µû¶ó°¥ ¼ö ÀÖ½À´Ï´Ù. ÀÌ¿Í °°Àº À¥ °³¹ßÀ» À§ÇÑ ±âÃÊ ³»¿ëÀ» ¹è¿î ÀûÀÌ ¾ø°Å³ª À¥ °³¹ß °æÇèÀÌ ¾ø´õ¶óµµ ÀÌ Ã¥ÀÇ ÇнÀ °úÁ¤À» µû¶ó°¥ ¼ö ÀÖµµ·Ï HTML°ú ÀÚ¹Ù½ºÅ©¸³Æ®, CSSÀÇ ±âÃÊÀûÀÎ ³»¿ëÀ» ¼³¸íÇÏ°í ÀÖ½À´Ï´Ù.
¡Ú ¿¹Á¦ ¼Ò½º
https://github.com/soaple/first-met-react-practice
¡Ú À¯Æ©ºê °ÀÇ
https://youtube.com/c/¼ÒÇÃTV
¸®¾×Æ®´Â ¿ÀǼҽº ÀÚ¹Ù½ºÅ©¸³Æ® UI ¶óÀ̺귯¸®ÀÔ´Ï´Ù. ÃÖ±Ù À¥»çÀÌÆ®(¶Ç´Â À¥ ¾ÖÇø®ÄÉÀ̼Ç)ÀÇ ±Ô¸ð°¡ Ä¿Áü¿¡ µû¶ó ¼ö¸¹Àº ÆäÀÌÁö¸¦ ¸¸µé¾î °ü¸®ÇÏ´Â °ÍÀº ¸Å¿ì ¾î·Æ½À´Ï´Ù. µû¶ó¼ º¹ÀâÇÑ À¥»çÀÌÆ®¸¦ ½±°í ºü¸£°Ô ±¸Çö ¹× °ü¸®ÇÒ ¼ö ÀÖµµ·Ï µµ¿ÍÁÖ´Â °ÍÀÌ ¸®¾×Æ®ÀÔ´Ï´Ù. ÀÌ Ã¥Àº ¸®¾×Æ®ÀÇ ÁÖ¿ä °³³äÀ» ÀÍÈ÷°í °£´ÜÇÑ ½Ç½ÀÀ» ÅëÇØ ½ÇÁ¦ À¥»çÀÌÆ®¿¡ ¸®¾×Æ®¸¦ Àû¿ëÇØ º¸¸ç ÇнÀÇÒ ¼ö ÀÖµµ·Ï ±¸¼ºµÇ¾î ÀÖ½À´Ï´Ù.
¡Ú ÀÌ Ã¥¿¡¼ ¹è¿ì´Â ³»¿ë
¡î ÇÊ¿äÇÑ ±âÃÊ Áö½Ä ¹× °³¹ß ȯ°æ
¡î ¸®¾×Æ® ¼Ò°³ ¹× Áغñ
¡î JSX
¡î ¿¤¸®¸ÕÆ® ·»´õ¸µ
¡î ÄÄÆ÷³ÍÆ®¿Í Props
¡î state¿Í »ý¸íÁÖ±â
¡î ÈÅ
¡î À̺¥Æ® Çڵ鸵
¡î Á¶°ÇºÎ ·»´õ¸µ
¡î ¸®½ºÆ®¿Í Å°
¡î Æû
¡î State ²ø¾î¿Ã¸®±â
¡î ÇÕ¼º°ú »ó¼Ó
¡î ÄÁÅؽºÆ®
¡î ½ºÅ¸Àϸµ
¡î ¹Ì´Ï ºí·Î±× ¸¸µé±â
¡Ú ÀÌ Ã¥ÀÇ ±¸¼º
0ÀåÀº ¸®¾×Æ®¸¦ ¹è¿ì±â Àü¿¡ ¾Ë¾Æ¾ß ÇÒ ±âÃÊ Áö½Ä°ú ½Ç½ÀÀ» ÁøÇàÇÒ °³¹ß ȯ°æ ¼³Á¤¿¡ ´ëÇØ ¼³¸íÇÕ´Ï´Ù. 1~2ÀåÀº ¸®¾×Æ®ÀÇ ±âº» °³³ä°ú Àå´ÜÁ¡¿¡ ´ëÇØ ¹è¿ì°í °£´ÜÇÑ ½Ç½ÀÀ» ÅëÇØ ¸®¾×Æ®¸¦ Àû¿ëÇØ º¾´Ï´Ù.
3ÀåºÎÅÍ 14Àå±îÁö´Â ¸®¾×Æ®ÀÇ °¢ ¿ä¼Òº° ±â´É¿¡ ´ëÇØ ¼³¸íÇÕ´Ï´Ù. °¢ éÅÍÀÇ Àü¹ÝºÎ´Â ÇØ´ç éÅÍ¿¡¼ ¹è¿ì°íÀÚ ÇÏ´Â ¸®¾×Æ®ÀÇ °¢ ¿ä¼Òº° ±âº» °³³äÀ» ¼³¸íÇÕ´Ï´Ù. ÇØ´ç éÅÍÀÇ ÈĹݺο¡´Â ¾Õ¿¡¼ ¹è¿î ±âº» ³»¿ëÀ» ¹ÙÅÁÀ¸·Î ½Ç½ÀÀ» ÅëÇØ ½ÇÁ¦ ¸®¾×Æ® »ç¿ë¹ýÀ» ÀÍÈ÷´Â ÇнÀ ÇüÅ·Π±¸¼ºµÇ¾î ÀÖ½À´Ï´Ù.
15Àå¿¡¼´Â ½ºÅ¸ÀϸµÀ» Çϱâ À§ÇØ CSSÀÇ ±âº»ÀûÀÎ ¹®¹ý°ú ¼±ÅÃÀÚ¿¡ ´ëÇØ ¹è¿ì°í styled-components¸¦ ´Ù·ç´Â ¹ýÀ» °£´ÜÇÏ°Ô ¹è¿ó´Ï´Ù.
16Àå¿¡¼´Â ¾Õ¿¡¼ ¹è¿î ³»¿ëÀ» Åä´ë·Î ¹Ì´Ï ºí·Î±×¸¦ Á÷Á¢ ¸¸µé¾î º¾´Ï´Ù. ÇÁ·ÎÁ§Æ® »ý¼ººÎÅÍ °¢Á¾ ÄÄÆ÷³ÍÆ®¸¦ ¸ðµÎ Á÷Á¢ Äڵ带 ÀÛ¼ºÇÏ¸ç °³¹ßÇØ º¾´Ï´Ù.
¡Ú ´ë»ó µ¶ÀÚ
ÀÌ Ã¥Àº ¸®¾×Æ®¸¦ óÀ½ Á¢ÇÏ´Â ÀÔ¹®ÀÚ¸¦ ´ë»óÀ¸·Î ÇÕ´Ï´Ù. HTML°ú ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ´Ù·ïº» °æÇèÀÌ ÀÖ´Ù¸é ¼ö¿ùÇÏ°Ô ÀÌ Ã¥ÀÇ °úÁ¤À» µû¶ó°¥ ¼ö ÀÖ½À´Ï´Ù. ÀÌ¿Í °°Àº À¥ °³¹ßÀ» À§ÇÑ ±âÃÊ ³»¿ëÀ» ¹è¿î ÀûÀÌ ¾ø°Å³ª À¥ °³¹ß °æÇèÀÌ ¾ø´õ¶óµµ ÀÌ Ã¥ÀÇ ÇнÀ °úÁ¤À» µû¶ó°¥ ¼ö ÀÖµµ·Ï HTML°ú ÀÚ¹Ù½ºÅ©¸³Æ®, CSSÀÇ ±âÃÊÀûÀÎ ³»¿ëÀ» ¼³¸íÇÏ°í ÀÖ½À´Ï´Ù.
¡Ú ¿¹Á¦ ¼Ò½º
https://github.com/soaple/first-met-react-practice
¡Ú À¯Æ©ºê °ÀÇ
https://youtube.com/c/¼ÒÇÃTV