1. React Native
2. React Native ํ๋ก์ ํธ ๋ง๋ค๊ธฐ
3. Expo๋ก RN ํ๋ก์ ํธ ๋ง๋ค๊ธฐ
4. ๋ฐฐํฌ
5. React Native์ ์ฃผ์ ์ปดํฌ๋ํธ๋ค

1. React Native
๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ ๋ฆฌ์กํธ๋ก ๋ชจ๋ฐ์ผ ์ฑ์ ๋ง๋ค ์ ์๋ ํ๋ ์์ํฌ๋ค.
๋ชจ๋ฐ์ผ ์ฑ์ ๋ง๋ค ์ ์๋ ๋ค์ํ ์ธ์ด์ ํ๋ ์์ํฌ๋ค์ด ์์ง๋ง, ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ฅผ ์ฌ์ฉํ๋ ์ด์ ๋ ํฌ๊ฒ ๋ ๊ฐ์ง๋ค.
- ๋น์ฉ ์ ์ฝ
๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ ์๋๋ก์ด๋, iOS ๋ค์ดํฐ๋ธ ์ฑ์ One Source, ์ฆ ํ๋์ ์ฝ๋๋ก ๋์์ ๋ง๋ค ์ ์๊ธฐ ๋๋ฌธ์ ์ฌ๋ฌ ๋น์ฉ, ์๊ฐ ์ธก๋ฉด์์ ํฌ๊ฒ ์ ์ฝ๋๋ค.
- ๋ฎ์ ๋ฌ๋์ปค๋ธ
๋ค์ดํฐ๋ธ ์ญ์ ๋ฆฌ์กํธ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ๊ธฐ ๋๋ฌธ์ ๊ธฐ์กด์ ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ ์ค ์๋ ์ฌ๋์ด๋ผ๋ฉด ๋น ๋ฅด๊ฒ ๋ฐฐ์ธ ์ ์๋ค.
๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์ ์ต๊ทผ ์ํคํ ์ฒ๋ ์๋์ ๊ฐ์ด ๋ณ๊ฒฝ๋์๋ค.
2. React Native ํ๋ก์ ํธ ๋ง๋ค๊ธฐ
๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ก ํ๋ก์ ํธ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์ฌ๋ฌ ๊ฐ์ง๊ฐ ์๋ค.
๊ณต์ ๋ฌธ์์์๋ ํฌ๊ฒ ๋ ๊ฐ์ง๋ฅผ ์๊ฐํ๊ณ ์๋ค.
- Expo Go
- ์ ์ ์ด ์์ฃผ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ์์ํ ์ ์๋ค.
- Native ์ฝ๋๋ฅผ ์์ ํ ์ ์๋ค. (java, swift ๋ฑ์ ์ธ์ด๋ก ์์ ๋ถ๊ฐ๋ฅ)
- ๋น๋์ ๋ฐฐํฌ๊น์ง ํธํ๊ฒ ๊ฐ๋ฅ
- Expo CLI๋ฅผ ํตํด ์ ์ดํ๋ค.
- React Native CLI
- ๋ค์ดํฐ๋ธ ์ฝ๋๋ฅผ ์ง์ ์์ ํ ์ ์๋ค. ๋์ ์์ ๋!
- ๋ชจ๋ ์ธํ๋ผ๋ฅผ ์ง์ ์ค์นํด์ผ ํ๋ค
- Android Studio ๋๋ Xcode๋ฅผ ์ค์นํ๊ณ ์ฌ๊ธฐ์ ๋น๋ํด์ผ ํ๋ค.
๊ทธ ์ธ์๋ CRNA (Create React Native App), ignite ๊ฐ์ ๋ณด์ผ๋ฌ ํ๋ ์ดํธ๊ฐ ์๋ค.
๋๋ ๋ณ๋์ ํ๋ก๊ทธ๋จ ์ค์น ์์ด ๋น ๋ฅด๊ฒ ์์ํด๋ณด๊ธฐ ์ํด Expo๋ก ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์ด๋ณด๊ธฐ๋ก ํ๋ค.
3. Expo๋ก RN ํ๋ก์ ํธ ๋ง๋ค๊ธฐ
๋จผ์ ์ฌ์ ์ค๋น๋ก Expo Go ์ฑ์ด ๊น๋ ค์์ด์ผ ํ๋ค.

Expo ํ์๊ฐ์ ๋ ํด๋์ด์ผ ํ๋ค!
Expo
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
expo.dev
๊ฐ์ ์ ํ๊ณ ํ๋ก์ ํธ๋ฅผ ์์ฑํ๋ฉด ์๋์ ๊ฐ์ Overview๊ฐ ๋์จ๋ค.

Expo๋ฅผ ์ฒ์ ์ด์ฉํ๊ฑฐ๋, eas-cli
๋ฅผ ์ค์นํ ์ ์ด ์๋ค๋ฉด ํฐ๋ฏธ๋์ ์ด์ด์ CLI๋ฅผ ์ค์น
npm install --global eas-cli
ํ๋ก์ ํธ๋ฅผ ์งํํ ๊ฒฝ๋ก๋ก ์ด๋ํด์ ๋ ๋ฒ์งธ ์ค์ธ create-expo-app
์ ์คํํ๋ค.

์ ๋์๋ค๋ฉด ์ด๋ฐ ์ํ๊ฐ ๋๋ค. ์ด์ ์์ฑํ ํ๋ก์ ํธ๋ฅผ ์ด์ด์ฃผ๊ณ EAS๋ฅผ ์ด๊ธฐํํด์ผ ํ๋ค.
๐ EAS(Expo Application Service)
- Expo์ ํด๋ผ์ฐ๋ ๋น๋ ์๋น์ค. ๋ช ๋ น์ด ํ๋๋ง์ผ๋ก ์์ฝ๊ฒ ๋ฐฐํฌ ๊ฐ๋ฅ!
๊นํ๋ธ์ ๋ ํฌ์งํ ๋ฆฌ ๊ฐ์ ๋๋์ด๋ผ๊ณ ๋ณด๋ฉด ๋ ๊ฒ ๊ฐ๋ค.
๋ก๊ทธ์ธ ํ๋ผ๋ ๋ฉ์์ง๊ฐ ๋จผ์ ๋จ๋๋ฐ Expo ๊ฐ์ ํ ๊ณ์ ์ผ๋ก ๋ก๊ทธ์ธํด์ฃผ๋ฉด ๋๋ค.

4. ๋ฐฐํฌ
์๋์ ๋ช ๋ น์ด๋ก ํ์ฌ๊น์ง์ ํ๋ก์ ํธ๋ฅผ ๋ฐฐํฌํ ์ ์๋ค.
eas update
๋ธ๋์น ์ด๋ฆ์ ์ ํํ๋ ๋ถ๋ถ์ด ์๋๋ฐ, ํธํ ๋๋ก ์ค์ . (๋๋ ๊ธฐ๋ณธ์ธ main์ผ๋ก ์งํํจ)
๋ฐฐํฌ๊ฐ ์๋ฃ๋๋ฉด URL์ด ํ๋ ๋ฌ๋ค.


๋งํฌ๋ก ๋ค์ด๊ฐ์ OS๋ณ Preview๋ฅผ ๋๋ฅด๋ฉด QR์ฝ๋๊ฐ ๋์จ๋ค!
์ฑ์คํ ์ด๋ ํ๋ ์ด์คํ ์ด์์ ์ฑ์ ๋ฑ๋กํ๋ ๊ณผ์ ์์ด ๊ฐ์ด ๋ฐฐํฌ ์๋ฃ!
5. React Native์ ์ฃผ์ ์ปดํฌ๋ํธ๋ค
์๋๋ ๊ณต์๋ฌธ์์์ ๋งํ๋ ์ฃผ์ ์ปดํฌ๋ํธ๋ค์ด๋ค.

์น๊ณผ ๋น๊ตํด๋ณด์์ ๋ ํฌ๊ฒ ์ด๋ ๊ฒ ๋ณผ ์ ์๊ฒ ๋ค.
- <View> ์ปดํฌ๋ํธ
- <div> ํ๊ทธ
- <Text> ์ปดํฌ๋ํธ
- <p> ํ๊ทธ
- RN์์๋ ํ ์คํธ๋ฅผ ๊ผญ ์ปดํฌ๋ํธ๋ก ๊ฐ์ธ์ฃผ์ด์ผ ์๋ฌ๊ฐ ๋์ง ์๋๋ค.
- <Image> ์ปดํฌ๋ํธ
- <img> ํ๊ทธ
- ๋ก์ปฌ์์ ๋ถ๋ฌ์ฌ ๋๋ require ๋ฉ์๋๋ฅผ ์ด์ฉ
<Image source={require('./img/check.png')} />
- ์ธ๋ถ ์ด๋ฏธ์ง๋ฅผ ๋ถ๋ฌ์ฌ ๋๋ uri ์์ฑ ์ด์ฉ
<Image style={{ width: 100, height: 100 }} source={{uri: 'https://velog.velcdn.com/images/_jouz_ryul/post/1a19773e-605e-4ed1-a0f3-245b7c2e13cd/image.jpeg',}}/>
- <ScrollView> ์ปดํฌ๋ํธ
- ์คํฌ๋กค ํ ์ ์๋ <div> ํ๊ทธ
- <TextInput> ์ปดํฌ๋ํธ
- <input type="text"> ํ๊ทธ
๊ทธ๋ฆฌ๊ณ ๋ฒํผ์ฒ๋ผ ๋ง์ด ์ฌ์ฉํ๋ <TouchableOpacity> ์ปดํฌ๋ํธ. onPress๋ผ๋ ์์ฑ์ ํตํด onClick ์์ ๊ธฐ๋ฅ์ ๋ฃ์ด์ค ์ ์๋ค.
UI ์ปดํฌ๋ํธ ์ธ์๋ ๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๋ฐฉ์๊ณผ ๋ง์ ์ฐจ์ด๊ฐ ์๋ ๊ฒ ๊ฐ๋ค. (์์ง๊น์ง ๋๋ผ๊ธฐ์!)
์น๋ง ๋ณด๋ค๊ฐ ์ฑ์ ๋ณด๋ค ๋ณด๋ ๋ญ๊ฐ ์๋กญ๊ธฐ๋ ํ๊ณ .. ๐
๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ ๊ณต์ ๋ฌธ์๋ฅผ ๋จ๊ธฐ๋ ๊ฒ์ ๋ง์ง๋ง์ผ๋ก ์ค๋ ๊ธ์ ๋ง์น๋ค!
React Native ยท Learn once, write anywhere
A framework for building native apps using React
reactnative.dev
'๐ Studying > ๐ TIL' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์ปค์คํ ํ ์ผ๋ก ํฌ๋๋ฆฌ์คํธ input ๋ฆฌํฉํ ๋งํ๊ธฐ (0) | 2023.01.02 |
---|---|
[ReactNative] AsyncStorage๋ก ๋ฐ์ดํฐ ์ ์ฅํ๊ธฐ (0) | 2022.12.30 |
[React] API์๋ฒ env ํ๊ฒฝ๋ณ์ ์ ์ฉํ๊ธฐ (0) | 2022.12.27 |
[React] setState ํจ์ prop์ผ๋ก ๋ณด๋ด ์ฌ์ฉํ๊ธฐ (0) | 2022.12.26 |
[React] Material UI ์ด์ฉํด์ ํ์ด์ง๋ค์ด์ ์ ์ฉํ๊ธฐ (0) | 2022.12.23 |
Comment