- ÇöÀç À§Ä¡
- home > ÄÄÇ»ÅÍ¡¤ICT¡¤¾îÇÐ > ÄÄÇ»ÅÍ¡¤IT µµ¼ > ¸ð¹ÙÀÏ ÇÁ·Î±×·¡¹Ö > óÀ½ ¹è¿ì´Â ¸®¾×Æ® ³×ÀÌƼºê[ÇѺû¹Ìµð¾î]
´Ü¼øÈ÷ UI ÄÄÆ÷³ÍÆ®¸¦ ¼³¸íÇÏ´Â À̷м°¡ ¾Æ´Ï¶ó, ½ÇÁ¦·Î °£´ÜÇÑ ¸ð¹ÙÀÏ ¾ÛÀ» ¸¸µé¸é¼ µð¹ö±ë°ú ¹èÆ÷±îÁö ºü¸£°Ô ÀÔ¹®ÇÒ ¼ö Àִ åÀÌ´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ±âº» Áö½ÄÀ» ¾Ë°í ÀÖÀ¸¸ç, ÀÚ¹Ù½ºÅ©¸³Æ® ES6 ¹®¹ý¿¡ ´ëÇØ ÀÌÇØÇÏ°í ÀÖ´Ù¸é Àб⿡ ´õ¿í ÆíÇÏ´Ù.
ÃÑ 10°³ ÀåÀ¸·Î ±¸¼ºµÇ¾î ÀÖÀ¸¸ç ½Ç½ÀÀº Expo ÇÁ·ÎÁ§Æ®·Î ÁøÇàÇÑ´Ù. ÇÙ½É ³»¿ë À§ÁÖ·Î ¼³¸íµÇ¾î ÀÖ°í, ´ÙÀ½ °úÁ¤À» ÅëÇØ ¸®¾×Æ® ³×ÀÌƼºêÀÇ »ç¿ë ¹æ¹ýÀ» ÀÍÈù ÈÄ Á÷Á¢ ¾ÖÇà ¾Û ½ºÅä¾î¿Í ±¸±Û Ç÷¹ÀÌ ½ºÅä¾î¿¡ ¹èÆ÷±îÁö Çغ¼ ¼ö ÀÖµµ·Ï ±¸¼ºÇß´Ù.
ÃÑ 10°³ ÀåÀ¸·Î ±¸¼ºµÇ¾î ÀÖÀ¸¸ç ½Ç½ÀÀº Expo ÇÁ·ÎÁ§Æ®·Î ÁøÇàÇÑ´Ù. ÇÙ½É ³»¿ë À§ÁÖ·Î ¼³¸íµÇ¾î ÀÖ°í, ´ÙÀ½ °úÁ¤À» ÅëÇØ ¸®¾×Æ® ³×ÀÌƼºêÀÇ »ç¿ë ¹æ¹ýÀ» ÀÍÈù ÈÄ Á÷Á¢ ¾ÖÇà ¾Û ½ºÅä¾î¿Í ±¸±Û Ç÷¹ÀÌ ½ºÅä¾î¿¡ ¹èÆ÷±îÁö Çغ¼ ¼ö ÀÖµµ·Ï ±¸¼ºÇß´Ù.
ÀúÀÚ: ±è¹üÁØ
1Àå. ¸®¾×Æ® ³×ÀÌƼºê¶õ?
1.1 ¸®¾×Æ® ³×ÀÌƼºêÀÇ ÀåÁ¡°ú ´ÜÁ¡
1.2 ¸®¾×Æ® ³×ÀÌƼºêÀÇ µ¿ÀÛ ¹æ½Ä
1.3 ¸¶Ä¡¸ç
- ¸®¾×Æ®¸¦ °øºÎÇÑ ÈÄ ½ÃÀÛÇØ¾ß Çϳª¿ä?
2Àå. ¸®¾×Æ® ³×ÀÌƼºê ½ÃÀÛÇϱâ
2.1 °³¹ß ȯ°æ ÁغñÇϱâ
2.2 ¸®¾×Æ® ³×ÀÌƼºê ÇÁ·ÎÁ§Æ® ¸¸µé±â
2.3 ¸¶Ä¡¸ç
- ¸®¾×Æ® ³×ÀÌƼºê ¸ÖƼ Ç÷§Æû °³¹ß
3Àå. ÄÄÆ÷³ÍÆ®
3.1 JSX
3.2 ÄÄÆ÷³ÍÆ®
3.3 props¿Í state
3.4 À̺¥Æ®
3.5 ¸¶Ä¡¸ç
- ŸÀÔ È®ÀÎ
4Àå. ½ºÅ¸Àϸµ
4.1 ½ºÅ¸Àϸµ
4.2 ¸®¾×Æ® ³×ÀÌƼºê ½ºÅ¸ÀÏ
4.3 ½ºÅ¸Àϵå ÄÄÆ÷³ÍÆ®
4.4 ¸¶Ä¡¸ç
- Prettier
5Àå. ÇÒ ÀÏ °ü¸® ¾ÖÇø®ÄÉÀ̼Ç
5.1 ÇÁ·ÎÁ§Æ® ÁغñÇϱâ
5.2 ŸÀÌƲ ¸¸µé±â
5.3 Input ÄÄÆ÷³ÍÆ® ¸¸µé±â
5.4 ÇÒ ÀÏ ¸ñ·Ï ¸¸µé±â
5.5 ±â´É ±¸ÇöÇϱâ
5.6 ºÎ°¡ ±â´É
5.7 ¸¶Ä¡¸ç
- µðÀÚÀÎ µµ±¸
6Àå. Hooks
6.1 useState
6.2 useEffect
6.3 useRef
6.4 useMemo
6.5 Ä¿½ºÅÒ Hooks ¸¸µé±â
6.6 ¸¶Ä¡¸ç
- Ŭ·¡½ºÇü ÄÄÆ÷³ÍÆ®¸¦ °øºÎÇØ¾ß Çϳª¿ä?
7Àå. Context API
7.1 Àü¿ª »óÅ °ü¸®
7.2 Context API
7.3 useContext
7.4 ¸¶Ä¡¸ç
- Ä¿¹Â´ÏƼ
8Àå. ³»ºñ°ÔÀ̼Ç
8.1 ¸®¾×Æ® ³»ºñ°ÔÀ̼Ç
8.2 ½ºÅà ³»ºñ°ÔÀ̼Ç
8.3 ÅÇ ³»ºñ°ÔÀ̼Ç
8.4 ¸¶Ä¡¸ç
- ³ªÀÇ Ã¹ ¹ø° ¸®¾×Æ® ³×ÀÌƼºê ÇÁ·ÎÁ§Æ®
9Àå. äÆà ¾ÖÇø®ÄÉÀ̼Ç
9.1 ÇÁ·ÎÁ§Æ® Áغñ
9.2 ÆÄÀ̾À̽º
9.3 ¾Û ¾ÆÀÌÄÜ°ú ·Îµù ȸé
9.4 ÀÎÁõ ȸé
9.5 ¸ÞÀΠȸé
9.6 ¸¶Ä¡¸ç
- ¾ÖÇà °³¹ßÀÚ °èÁ¤ »ý¼º
10Àå. ¹èÆ÷Çϱâ
10.1 ÇÁ·ÎÁ§Æ® ºôµå
10.2 iOS ¹èÆ÷
10.3 ¾Èµå·ÎÀÌµå ¹èÆ÷
10.4 ¹öÀü ¾÷±×·¹À̵å
10.5 ¸¶Ä¡¸ç
- ÀÌ Ã¥ ÀÌÈÄ¿¡
1.1 ¸®¾×Æ® ³×ÀÌƼºêÀÇ ÀåÁ¡°ú ´ÜÁ¡
1.2 ¸®¾×Æ® ³×ÀÌƼºêÀÇ µ¿ÀÛ ¹æ½Ä
1.3 ¸¶Ä¡¸ç
- ¸®¾×Æ®¸¦ °øºÎÇÑ ÈÄ ½ÃÀÛÇØ¾ß Çϳª¿ä?
2Àå. ¸®¾×Æ® ³×ÀÌƼºê ½ÃÀÛÇϱâ
2.1 °³¹ß ȯ°æ ÁغñÇϱâ
2.2 ¸®¾×Æ® ³×ÀÌƼºê ÇÁ·ÎÁ§Æ® ¸¸µé±â
2.3 ¸¶Ä¡¸ç
- ¸®¾×Æ® ³×ÀÌƼºê ¸ÖƼ Ç÷§Æû °³¹ß
3Àå. ÄÄÆ÷³ÍÆ®
3.1 JSX
3.2 ÄÄÆ÷³ÍÆ®
3.3 props¿Í state
3.4 À̺¥Æ®
3.5 ¸¶Ä¡¸ç
- ŸÀÔ È®ÀÎ
4Àå. ½ºÅ¸Àϸµ
4.1 ½ºÅ¸Àϸµ
4.2 ¸®¾×Æ® ³×ÀÌƼºê ½ºÅ¸ÀÏ
4.3 ½ºÅ¸Àϵå ÄÄÆ÷³ÍÆ®
4.4 ¸¶Ä¡¸ç
- Prettier
5Àå. ÇÒ ÀÏ °ü¸® ¾ÖÇø®ÄÉÀ̼Ç
5.1 ÇÁ·ÎÁ§Æ® ÁغñÇϱâ
5.2 ŸÀÌƲ ¸¸µé±â
5.3 Input ÄÄÆ÷³ÍÆ® ¸¸µé±â
5.4 ÇÒ ÀÏ ¸ñ·Ï ¸¸µé±â
5.5 ±â´É ±¸ÇöÇϱâ
5.6 ºÎ°¡ ±â´É
5.7 ¸¶Ä¡¸ç
- µðÀÚÀÎ µµ±¸
6Àå. Hooks
6.1 useState
6.2 useEffect
6.3 useRef
6.4 useMemo
6.5 Ä¿½ºÅÒ Hooks ¸¸µé±â
6.6 ¸¶Ä¡¸ç
- Ŭ·¡½ºÇü ÄÄÆ÷³ÍÆ®¸¦ °øºÎÇØ¾ß Çϳª¿ä?
7Àå. Context API
7.1 Àü¿ª »óÅ °ü¸®
7.2 Context API
7.3 useContext
7.4 ¸¶Ä¡¸ç
- Ä¿¹Â´ÏƼ
8Àå. ³»ºñ°ÔÀ̼Ç
8.1 ¸®¾×Æ® ³»ºñ°ÔÀ̼Ç
8.2 ½ºÅà ³»ºñ°ÔÀ̼Ç
8.3 ÅÇ ³»ºñ°ÔÀ̼Ç
8.4 ¸¶Ä¡¸ç
- ³ªÀÇ Ã¹ ¹ø° ¸®¾×Æ® ³×ÀÌƼºê ÇÁ·ÎÁ§Æ®
9Àå. äÆà ¾ÖÇø®ÄÉÀ̼Ç
9.1 ÇÁ·ÎÁ§Æ® Áغñ
9.2 ÆÄÀ̾À̽º
9.3 ¾Û ¾ÆÀÌÄÜ°ú ·Îµù ȸé
9.4 ÀÎÁõ ȸé
9.5 ¸ÞÀΠȸé
9.6 ¸¶Ä¡¸ç
- ¾ÖÇà °³¹ßÀÚ °èÁ¤ »ý¼º
10Àå. ¹èÆ÷Çϱâ
10.1 ÇÁ·ÎÁ§Æ® ºôµå
10.2 iOS ¹èÆ÷
10.3 ¾Èµå·ÎÀÌµå ¹èÆ÷
10.4 ¹öÀü ¾÷±×·¹À̵å
10.5 ¸¶Ä¡¸ç
- ÀÌ Ã¥ ÀÌÈÄ¿¡
äÆà ¾ÛÀ» ±¸ÇöÇÏ¸ç ¸®¾×Æ® ³×ÀÌƼºêÀÇ ÀÔ¹®ºÎÅÍ Å×½ºÆ®±îÁö
´Ü¼øÈ÷ UI ÄÄÆ÷³ÍÆ®¸¦ ¼³¸íÇÏ´Â À̷м°¡ ¾Æ´Ï¶ó, ½ÇÁ¦·Î °£´ÜÇÑ ¸ð¹ÙÀÏ ¾ÛÀ» ¸¸µé¸é¼ µð¹ö±ë°ú
¹èÆ÷±îÁö ºü¸£°Ô ÀÔ¹®ÇÒ ¼ö Àִ åÀÌ´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ±âº» Áö½ÄÀ» ¾Ë°í ÀÖÀ¸¸ç, ÀÚ¹Ù½ºÅ©¸³
Æ® ES6 ¹®¹ý¿¡ ´ëÇØ ÀÌÇØÇÏ°í ÀÖ´Ù¸é Àб⿡ ´õ¿í ÆíÇÏ´Ù. ÇÙ½É ³»¿ëºÎÅÍ ¸ÕÀú º¸¸é¼ ¸®¾×Æ® ³×ÀÌƼºêÀÇ »ç¿ë ¹æ¹ýÀ» ÀÍÈù ÈÄ, Á÷Á¢ ¾ÖÇà ¾Û ½ºÅä¾î¿Í ±¸±Û Ç÷¹ÀÌ ½ºÅä¾î¿¡ ¹èÆ÷Çϵµ·Ï ±¸¼ºÇß´Ù. ÀÌ Ã¥ÀÇ ¸ñÇ¥´Â ¸®¾×Æ® ³×ÀÌƼºê ¿ÏÀü Á¤º¹ÀÌ ¾Æ´Ï´Ù. ¸®¾×Æ® ³×ÀÌƼºê¸¦ ºÎ´ã ¾øÀÌ ½±°Ô ½ÃÀÛÇÏ¿© ¹«¾ùÀ̵ç Çϳª¶óµµ ¸¸µé¾îº¸°í ½Í´Ù¸é ¹Ù·Î Áö±ÝÀÌ´Ù!
¡Ü ÄÄÆ÷³ÍÆ®/½ºÅ¸Àϸµ
¡Ü ÇÒ ÀÏ °ü¸® ¾ÖÇø®ÄÉÀÌ¼Ç ¸¸µé±â
¡Ü Hooks/Context API
¡Ü ¸®¾×Æ® ³»ºñ°ÔÀ̼Ç/½ºÅà ³»ºñ°ÔÀ̼Ç/ÅÇ ³»ºñ°ÔÀ̼Ç
¡Ü äÆà ¾ÖÇø®ÄÉÀÌ¼Ç ¸¸µé±â
¡Ü iOS/¾Èµå·ÎÀÌµå ¹èÆ÷Çϱâ
¡Ü ¹öÀü ¾÷±×·¹À̵å
ÃÑ 10°³ ÀåÀ¸·Î ±¸¼ºµÇ¾î ÀÖÀ¸¸ç ½Ç½ÀÀº Expo ÇÁ·ÎÁ§Æ®·Î ÁøÇàÇÑ´Ù. ÇÙ½É ³»¿ë À§ÁÖ·Î ¼³¸íµÇ¾î ÀÖ°í, ´ÙÀ½ °úÁ¤À» ÅëÇØ ¸®¾×Æ® ³×ÀÌƼºêÀÇ »ç¿ë ¹æ¹ýÀ» ÀÍÈù ÈÄ Á÷Á¢ ¾ÖÇà ¾Û ½ºÅä¾î¿Í ±¸±Û Ç÷¹ÀÌ ½ºÅä¾î¿¡ ¹èÆ÷±îÁö Çغ¼ ¼ö ÀÖµµ·Ï ±¸¼ºÇß´Ù.
¡Ü 1Àå¿¡¼´Â ¸®¾×Æ® ³×ÀÌƼºê¶õ ¹«¾ùÀÎÁö, Àå´ÜÁ¡Àº ¹«¾ùÀÎÁö, ¾î¶»°Ô µ¿ÀÛÇÏ´ÂÁö ¾Ë¾Æº»´Ù.
¡Ü 2Àå¿¡¼´Â ¸®¾×Æ® ³×ÀÌƼºê¸¦ °³¹ßÇϱâ À§ÇÑ °³¹ß ȯ°æÀ» ±¸¼ºÇÏ°í ¸®¾×Æ® ³×ÀÌƼºê ÇÁ·ÎÁ§Æ®¸¦ »ý¼ºÇÏ¿© ½ÇÇàÇغ»´Ù. ¸®¾×Æ® ³×ÀÌƼºê ȯ°æ ¼³Á¤Àº ¿î¿µÃ¼Á¦ÀÇ Á¾·ù¿Í »ó°ü¾øÀÌ °³¹ßÀ» ÁøÇàÇÒ ¼ö ÀÖµµ·Ï ¸Æ°ú À©µµ¿ì ȯ°æ ¸ðµÎ ´Ù·ç°í ÀÖ´Ù. ¸®¾×Æ® ³×ÀÌƼºêÀÇ ÇÁ·ÎÁ§Æ®¸¦ »ý¼ºÀ» À§ÇØ Expo¸¦ ÀÌ¿ëÇÏ´Â ¹æ¹ý°ú ¸®¾×Æ® ³×ÀÌƼºê CLI¸¦ ÀÌ¿ëÇÏ´Â ¹æ¹ýÀ» ¾Ë¾Æº»´Ù.
¡Ü 3Àå¿¡¼´Â ¸®¾×Æ® ³×ÀÌƼºê¸¦ »ç¿ëÇϱâ À§ÇØ JSXÀÇ Æ¯Â¡°ú »ç¿ë¹ý¿¡ ´ëÇØ ¾Ë¾Æº¸°í ÄÄÆ÷³ÍÆ®¿¡ °üÇØ »ìÆ캻´Ù. ¶Ç ÄÄÆ÷³ÍÆ®¿¡¼ Áß¿äÇÑ »óÅÂ¿Í ¼Ó¼º¿¡ ´ëÇؼµµ ¾Ë¾Æº¸°í ¸¹ÀÌ »ç¿ëµÇ´Â À̺¥Æ®¸¦ ´Ù·ïº»´Ù.
¡Ü 4Àå¿¡¼´Â ÄÄÆ÷³ÍÆ®¿¡ ½ºÅ¸ÀÏÀ» Àû¿ëÇÏ´Â ¹æ¹ý¿¡ ´ëÇØ ¾Ë¾Æº»´Ù. ¸®¾×Æ® ³×ÀÌƼºê¿¡¼ »ç¿ëµÇ´Â ½ºÅ¸ÀÏÀÇ Æ¯¼º¿¡ ´ëÇØ »ìÆ캸°í, ¸®¾×Æ® ³×ÀÌƼºê ½ºÅ¸ÀÏÀÇ ´ÜÁ¡À» º¸¿ÏÇϱâ À§ÇØ ½ºÅ¸Àϵå ÄÄÆ÷³ÍÆ®¸¦ »ç¿ëÇÏ´Â ¹æ¹ýÀ» ÀÍÈù´Ù.
¡Ü 5Àå¿¡¼´Â 3Àå°ú 4Àå¿¡¼ °øºÎÇÑ ³»¿ëÀ» ¹ÙÅÁÀ¸·Î °£´ÜÇÑ ÇÒ ÀÏ °ü¸® ¾ÖÇø®ÄÉÀ̼ÇÀ» ¸¸µå´Â ÇÁ·ÎÁ§Æ®¸¦ ÁøÇàÇÑ´Ù. ÇÁ·ÎÁ§Æ®¸¦ ÁøÇàÇϸç StatusBar ÄÄÆ÷³ÍÆ®, AsyncStorage µîÀÇ »ç¿ë¹ý¿¡ ´ëÇØ ´Ù·é´Ù.
¡Ü 6Àå¿¡¼´Â ¸®¾×Æ® Hooks¿¡ ´ëÇØ ¹è¿î´Ù. ÇÔ¼öÇü ÄÄÆ÷³ÍÆ®¿¡¼ »óŸ¦ °ü¸®ÇÏ°í ±× ¿Ü ´Ù¾çÇÑ ÀÛ¾÷À» À§ÇÑ HooksÀÇ Á¾·ù¿Í »ç¿ë ¹æ¹ý¿¡ ´ëÇØ ¾Ë¾Æº»´Ù.
¡Ü 7Àå¿¡¼´Â Context API¿¡ ´ëÇØ »ìÆ캻´Ù. Context API¸¦ ÅëÇØ »óŸ¦ Àü¿ªÀûÀ¸·Î °ü¸®ÇÔÀ¸·Î½á ¿©·¯ ÄÄÆ÷³ÍÆ®¿¡¼ µ¿½Ã¿¡ Á¢±ÙÇÏ°í °ü¸®ÇÏ´Â ¹æ¹ýÀ» ÀÍÈù´Ù.
¡Ü 8Àå¿¡¼´Â ȸé Àüȯ°ú ±¸¼ºÀ» À§ÇØ ³»ºñ°ÔÀ̼ÇÀ» »ç¿ëÇÏ´Â ¹æ¹ýÀ» ¾Ë¾Æº»´Ù. ÀÌ Ã¥¿¡¼´Â ¸®¾×Æ® ³»ºñ°ÔÀÌ¼Ç ¶óÀ̺귯¸®ÀÇ ½ºÅà ³»ºñ°ÔÀ̼ǰú ÅÇ ³»ºñ°ÔÀ̼ǿ¡ ´ëÇØ ±× Ư¡°ú »ç¿ë¹ý¿¡ ´ëÇØ »ìÆ캻´Ù.
¡Ü 9Àå¿¡¼´Â ¾Õ¿¡¼ °øºÎÇÑ ¸ðµç ³»¿ëÀ» ÀÌ¿ëÇÏ¿© äÆà ¾ÖÇø®ÄÉÀ̼ÇÀ» ¸¸µå´Â ÇÁ·ÎÁ§Æ®¸¦ ÁøÇàÇÑ´Ù. ÇÁ·ÎÁ§Æ®¸¦ ÁøÇàÇÏ´Â °úÁ¤¿¡¼ FlatList ÄÄÆ÷³ÍÆ®, ActivityIndicator ÄÄÆ÷³ÍÆ® µîÀÇ ¸®¾×Æ® ³×ÀÌƼºê ±â´É»Ó ¾Æ´Ï¶ó, ´Ù¾çÇÑ ¶óÀ̺귯¸®¿Í ÆÄÀ̾À̽º¿¡ ´ëÇؼµµ ÇÔ²² ´Ù·é´Ù.
¡Ü 10Àå¿¡¼´Â 9Àå¿¡¼ ¿Ï¼ºÇÑ ÇÁ·ÎÁ§Æ®¸¦ Á÷Á¢ ¾ÖÇà ¾Û ½ºÅä¾î¿Í ±¸±Û Ç÷¹ÀÌ ½ºÅä¾î¿¡ ¹èÆ÷ÇÏ´Â ¹æ¹ýÀ» ¾Ë¾Æº»´Ù.
´Ü¼øÈ÷ UI ÄÄÆ÷³ÍÆ®¸¦ ¼³¸íÇÏ´Â À̷м°¡ ¾Æ´Ï¶ó, ½ÇÁ¦·Î °£´ÜÇÑ ¸ð¹ÙÀÏ ¾ÛÀ» ¸¸µé¸é¼ µð¹ö±ë°ú
¹èÆ÷±îÁö ºü¸£°Ô ÀÔ¹®ÇÒ ¼ö Àִ åÀÌ´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ±âº» Áö½ÄÀ» ¾Ë°í ÀÖÀ¸¸ç, ÀÚ¹Ù½ºÅ©¸³
Æ® ES6 ¹®¹ý¿¡ ´ëÇØ ÀÌÇØÇÏ°í ÀÖ´Ù¸é Àб⿡ ´õ¿í ÆíÇÏ´Ù. ÇÙ½É ³»¿ëºÎÅÍ ¸ÕÀú º¸¸é¼ ¸®¾×Æ® ³×ÀÌƼºêÀÇ »ç¿ë ¹æ¹ýÀ» ÀÍÈù ÈÄ, Á÷Á¢ ¾ÖÇà ¾Û ½ºÅä¾î¿Í ±¸±Û Ç÷¹ÀÌ ½ºÅä¾î¿¡ ¹èÆ÷Çϵµ·Ï ±¸¼ºÇß´Ù. ÀÌ Ã¥ÀÇ ¸ñÇ¥´Â ¸®¾×Æ® ³×ÀÌƼºê ¿ÏÀü Á¤º¹ÀÌ ¾Æ´Ï´Ù. ¸®¾×Æ® ³×ÀÌƼºê¸¦ ºÎ´ã ¾øÀÌ ½±°Ô ½ÃÀÛÇÏ¿© ¹«¾ùÀ̵ç Çϳª¶óµµ ¸¸µé¾îº¸°í ½Í´Ù¸é ¹Ù·Î Áö±ÝÀÌ´Ù!
¡Ü ÄÄÆ÷³ÍÆ®/½ºÅ¸Àϸµ
¡Ü ÇÒ ÀÏ °ü¸® ¾ÖÇø®ÄÉÀÌ¼Ç ¸¸µé±â
¡Ü Hooks/Context API
¡Ü ¸®¾×Æ® ³»ºñ°ÔÀ̼Ç/½ºÅà ³»ºñ°ÔÀ̼Ç/ÅÇ ³»ºñ°ÔÀ̼Ç
¡Ü äÆà ¾ÖÇø®ÄÉÀÌ¼Ç ¸¸µé±â
¡Ü iOS/¾Èµå·ÎÀÌµå ¹èÆ÷Çϱâ
¡Ü ¹öÀü ¾÷±×·¹À̵å
ÃÑ 10°³ ÀåÀ¸·Î ±¸¼ºµÇ¾î ÀÖÀ¸¸ç ½Ç½ÀÀº Expo ÇÁ·ÎÁ§Æ®·Î ÁøÇàÇÑ´Ù. ÇÙ½É ³»¿ë À§ÁÖ·Î ¼³¸íµÇ¾î ÀÖ°í, ´ÙÀ½ °úÁ¤À» ÅëÇØ ¸®¾×Æ® ³×ÀÌƼºêÀÇ »ç¿ë ¹æ¹ýÀ» ÀÍÈù ÈÄ Á÷Á¢ ¾ÖÇà ¾Û ½ºÅä¾î¿Í ±¸±Û Ç÷¹ÀÌ ½ºÅä¾î¿¡ ¹èÆ÷±îÁö Çغ¼ ¼ö ÀÖµµ·Ï ±¸¼ºÇß´Ù.
¡Ü 1Àå¿¡¼´Â ¸®¾×Æ® ³×ÀÌƼºê¶õ ¹«¾ùÀÎÁö, Àå´ÜÁ¡Àº ¹«¾ùÀÎÁö, ¾î¶»°Ô µ¿ÀÛÇÏ´ÂÁö ¾Ë¾Æº»´Ù.
¡Ü 2Àå¿¡¼´Â ¸®¾×Æ® ³×ÀÌƼºê¸¦ °³¹ßÇϱâ À§ÇÑ °³¹ß ȯ°æÀ» ±¸¼ºÇÏ°í ¸®¾×Æ® ³×ÀÌƼºê ÇÁ·ÎÁ§Æ®¸¦ »ý¼ºÇÏ¿© ½ÇÇàÇغ»´Ù. ¸®¾×Æ® ³×ÀÌƼºê ȯ°æ ¼³Á¤Àº ¿î¿µÃ¼Á¦ÀÇ Á¾·ù¿Í »ó°ü¾øÀÌ °³¹ßÀ» ÁøÇàÇÒ ¼ö ÀÖµµ·Ï ¸Æ°ú À©µµ¿ì ȯ°æ ¸ðµÎ ´Ù·ç°í ÀÖ´Ù. ¸®¾×Æ® ³×ÀÌƼºêÀÇ ÇÁ·ÎÁ§Æ®¸¦ »ý¼ºÀ» À§ÇØ Expo¸¦ ÀÌ¿ëÇÏ´Â ¹æ¹ý°ú ¸®¾×Æ® ³×ÀÌƼºê CLI¸¦ ÀÌ¿ëÇÏ´Â ¹æ¹ýÀ» ¾Ë¾Æº»´Ù.
¡Ü 3Àå¿¡¼´Â ¸®¾×Æ® ³×ÀÌƼºê¸¦ »ç¿ëÇϱâ À§ÇØ JSXÀÇ Æ¯Â¡°ú »ç¿ë¹ý¿¡ ´ëÇØ ¾Ë¾Æº¸°í ÄÄÆ÷³ÍÆ®¿¡ °üÇØ »ìÆ캻´Ù. ¶Ç ÄÄÆ÷³ÍÆ®¿¡¼ Áß¿äÇÑ »óÅÂ¿Í ¼Ó¼º¿¡ ´ëÇؼµµ ¾Ë¾Æº¸°í ¸¹ÀÌ »ç¿ëµÇ´Â À̺¥Æ®¸¦ ´Ù·ïº»´Ù.
¡Ü 4Àå¿¡¼´Â ÄÄÆ÷³ÍÆ®¿¡ ½ºÅ¸ÀÏÀ» Àû¿ëÇÏ´Â ¹æ¹ý¿¡ ´ëÇØ ¾Ë¾Æº»´Ù. ¸®¾×Æ® ³×ÀÌƼºê¿¡¼ »ç¿ëµÇ´Â ½ºÅ¸ÀÏÀÇ Æ¯¼º¿¡ ´ëÇØ »ìÆ캸°í, ¸®¾×Æ® ³×ÀÌƼºê ½ºÅ¸ÀÏÀÇ ´ÜÁ¡À» º¸¿ÏÇϱâ À§ÇØ ½ºÅ¸Àϵå ÄÄÆ÷³ÍÆ®¸¦ »ç¿ëÇÏ´Â ¹æ¹ýÀ» ÀÍÈù´Ù.
¡Ü 5Àå¿¡¼´Â 3Àå°ú 4Àå¿¡¼ °øºÎÇÑ ³»¿ëÀ» ¹ÙÅÁÀ¸·Î °£´ÜÇÑ ÇÒ ÀÏ °ü¸® ¾ÖÇø®ÄÉÀ̼ÇÀ» ¸¸µå´Â ÇÁ·ÎÁ§Æ®¸¦ ÁøÇàÇÑ´Ù. ÇÁ·ÎÁ§Æ®¸¦ ÁøÇàÇϸç StatusBar ÄÄÆ÷³ÍÆ®, AsyncStorage µîÀÇ »ç¿ë¹ý¿¡ ´ëÇØ ´Ù·é´Ù.
¡Ü 6Àå¿¡¼´Â ¸®¾×Æ® Hooks¿¡ ´ëÇØ ¹è¿î´Ù. ÇÔ¼öÇü ÄÄÆ÷³ÍÆ®¿¡¼ »óŸ¦ °ü¸®ÇÏ°í ±× ¿Ü ´Ù¾çÇÑ ÀÛ¾÷À» À§ÇÑ HooksÀÇ Á¾·ù¿Í »ç¿ë ¹æ¹ý¿¡ ´ëÇØ ¾Ë¾Æº»´Ù.
¡Ü 7Àå¿¡¼´Â Context API¿¡ ´ëÇØ »ìÆ캻´Ù. Context API¸¦ ÅëÇØ »óŸ¦ Àü¿ªÀûÀ¸·Î °ü¸®ÇÔÀ¸·Î½á ¿©·¯ ÄÄÆ÷³ÍÆ®¿¡¼ µ¿½Ã¿¡ Á¢±ÙÇÏ°í °ü¸®ÇÏ´Â ¹æ¹ýÀ» ÀÍÈù´Ù.
¡Ü 8Àå¿¡¼´Â ȸé Àüȯ°ú ±¸¼ºÀ» À§ÇØ ³»ºñ°ÔÀ̼ÇÀ» »ç¿ëÇÏ´Â ¹æ¹ýÀ» ¾Ë¾Æº»´Ù. ÀÌ Ã¥¿¡¼´Â ¸®¾×Æ® ³»ºñ°ÔÀÌ¼Ç ¶óÀ̺귯¸®ÀÇ ½ºÅà ³»ºñ°ÔÀ̼ǰú ÅÇ ³»ºñ°ÔÀ̼ǿ¡ ´ëÇØ ±× Ư¡°ú »ç¿ë¹ý¿¡ ´ëÇØ »ìÆ캻´Ù.
¡Ü 9Àå¿¡¼´Â ¾Õ¿¡¼ °øºÎÇÑ ¸ðµç ³»¿ëÀ» ÀÌ¿ëÇÏ¿© äÆà ¾ÖÇø®ÄÉÀ̼ÇÀ» ¸¸µå´Â ÇÁ·ÎÁ§Æ®¸¦ ÁøÇàÇÑ´Ù. ÇÁ·ÎÁ§Æ®¸¦ ÁøÇàÇÏ´Â °úÁ¤¿¡¼ FlatList ÄÄÆ÷³ÍÆ®, ActivityIndicator ÄÄÆ÷³ÍÆ® µîÀÇ ¸®¾×Æ® ³×ÀÌƼºê ±â´É»Ó ¾Æ´Ï¶ó, ´Ù¾çÇÑ ¶óÀ̺귯¸®¿Í ÆÄÀ̾À̽º¿¡ ´ëÇؼµµ ÇÔ²² ´Ù·é´Ù.
¡Ü 10Àå¿¡¼´Â 9Àå¿¡¼ ¿Ï¼ºÇÑ ÇÁ·ÎÁ§Æ®¸¦ Á÷Á¢ ¾ÖÇà ¾Û ½ºÅä¾î¿Í ±¸±Û Ç÷¹ÀÌ ½ºÅä¾î¿¡ ¹èÆ÷ÇÏ´Â ¹æ¹ýÀ» ¾Ë¾Æº»´Ù.