React Native

모바일 애플리케이션 프레임워크

작동 원리

  • React Native는 브라우저를 사용하지 않는다.
  • bridge를 통해 JS 코드를 각 운영체제에 맞는 코드로 컴파일하여 보낸다.
  • Native는 Event를 감지하고 이를 JS에 전달한다.
  • JS는 해당 이벤트에 따라 어떤 동작을 해야하는지 전달한다.

    • 컴포넌트

  • react native는 브라우저에서 동작하는 것이 아니므로 div나 p와 같은 HTML 태그를 사용할 수 없다.
  • 따라서 import { Text, View } from "react-native"; 와 같이 컴포넌트를 import해서 사용한다.
  • <View> : Container (div)
  • <Text> : 모든 text는 text component에 들어가야 한다. 그렇지 않으면 에러가 발생한다.

    • 스타일

  • 기본적으로 styled-component와 비슷한 문법을 사용한다.
  • StyleSheet.create()를 사용하면 CSS 자동완성 기능이 제공되지만, 필수적으로 해당 메소드를 사용해야 하는 것은 아니다.
    • <View style={styles.sectionContainer}>
    	<Text style={styles.sectionTitle}>{title}</Text>
    </View>
    const styles = StyleSheet.create({
      sectionContainer: {
        marginTop: 32,
        paddingHorizontal: 24,
      },
      sectionTitle: {
        fontSize: 24,
        fontWeight: '600',
      },
    });
  • css와 다르게 camelCase를 사용해서 표기한다.
  • StyleSheet의 여러 객체를 적용하려면 배열로 만들어 넣을 수도 있다.
    • <View style={[styles.sectionContainer, styles.sectionTitle]}>
    	...
    </View>
  • 위처럼 StyleSheet를 만들어 적용할 수도 있고, 아래처럼 바로 적용할 수도 있다.
    • <View style={{backgroundColor: "orange"}}>
     ...
    </View>
  • 몇몇 CSS 문법은 사용할 수 없다