Snack

https://snack.expo.dev/

브라우저에서 React 어플리케이션을 만들 수 있게 해주는 온라인 코드에디터이다.

브라우저에서 IOS, Android 어플리케이션을 만들고 웹에서 미리보기까지 가능하다.

코드 수정하면 auto reload기능까지 되어있고, 해당 링크로 다른 사람들에게 공유도 가능하다.

React Native

1. React Native는 웹사이트가 아니다.

   따라서 HTML이 아니기 때문에 div 태그와 같은 HTML 태그를 사용할 수 없고, View를 사용해야 한다.

   View는 Container이고, 항상 import해서 사용해야 한다.

2. React Native에 있는 모든 Text는 Text component에 들어가야 한다.

   HTML에는 span, p, h1 등이 있지만 RN에는 Text 컴포넌트 안에 작성해야한다.

3. 웹에서 사용한 CSS 대부분 98%정도는 사용할 수 있지만, 사용하지 못하는 property들을 알아야한다.

4. StyleSheet.create는 object를 생성하는데 사용된다.

   원하는 컴포넌트에 style 속성을 사용하여 Styles.container로 사용이 가능하다.

   StyleSheet.create를 사용하면 해당 css 옵션 자동완성 기능을 제공한다

   export default function App() {
     return (
       <View style={styles.container}>
         <Text>Open up App.js to start working on your app!</Text>
         <Text>Hi! Taemin</Text>
         <StatusBar style="auto" />
       </View>
     );
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: '#fff',
       alignItems: 'center',
       justifyContent: 'center',
     },
   });
   

5. StyleSheet.create말고 해당 style 자리에 바로 작성해도 된다.

   export default function App() {
     return (
       <View style={{
   			flex: 1,
   	    backgroundColor: '#fff',
   	    alignItems: 'center',
   	    justifyContent: 'center',
   		}}>
         <Text>Open up App.js to start working on your app!</Text>
         <Text>Hi! Taemin</Text>
         <StatusBar style="auto" />
       </View>
     );
   }
   

6. 또 다른 방법

   export default function App() {
     return (
       <View style={styles.container}>
         <Text>Open up App.js to start working on your app!</Text>
         <Text>Hi! Taemin</Text>
         <StatusBar style="auto" />
       </View>
     );
   }
   
   const styles = {
     container: {
       flex: 1,
       backgroundColor: '#fff',
       alignItems: 'center',
       justifyContent: 'center',
     },
   };
   

   이렇게 사용해도 동일하게 동작하지만, StyleSheet.create를 사용했을 때 제공되던 자동완성 기능이 제공되지 않는다.

   따라서 StyleSheet.create 사용하면 편리하게 사용이 가능하다.

React Native Package

https://reactnative.dev/docs/components-and-apis

이전에 React Native에서는 다양한 컴포넌트와 API들을 제공함으로써 개발자들에게 편의성을 제공해주려고 했다.

하지만 그렇게 할 수 없었고, 수많은 버그가 발생하면서 점점 컴포넌트와 API를 줄여서 최소한의 것들만 제공을 하고 있다.

그렇게 함으로써 안정되고 빠르게 서비스를 제공할 수 있기 때문이다.