리액트네이티브

사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리
React.js + React-dom ⇒ Web App
React.js + React Native(Bridge/JSI, etc) ⇒ Native Mobile Apps (iOS/Android)

인스타그램, 페이스북, 핀터레스트 등 서비스들이 있다.
경쟁자 flutter,xamarin이 있는데
flutter 사용자가 월등히 많다.

npx create-expo-app AwesomeProject
yarn create expo-app AwesomeProject

npx 나 yarn으로 프로젝트를 설치 후 사용한다.

• React Native Cli
  • 모든 React Native 를 위한 인프라를 직접 설치
  • Native 코드 직접 수정 가능
• Expo Go
  • 쉬운 셋업 및 빠른 초기개발
  • Native 코드 수정은 불가능
• CRNA (Create React Native App) https://github.com/expo/create-react-native-app
  • CRA 에서 영감을 받고 만든 React Native Boiler Plate로 Expo SDK와 Cli의 특징을 모두 가지고 있음
  • Android Studio 또는 Xcode 설치 필요.
• ignite https://github.com/infinitered/ignite ignite/Guide.md at master · infinitered/ignite
  • CRNA + MobX 등 각종 라이브러리들도 샘플 코드들이 들어 있음.
  • React Native로 복잡한 앱을 만들어야 할 때 초기 셋업 후 간단한 수정작업으로 앱 완성 가능. 숙련자에게 오히려 추천.

수업은 expo로 진행되었다.

React Native 주요 UI 컴포넌트

<Veiw>
<Text>
<Image>
<ScrollView>
<TextInput>

- SafeAreaView : 스마트폰 상단의 노치나 카메라 등에 해당하는 높이까지는 제외하고 Area를 잡습니다.
- View 는 기본적으로 flexBox 이며 default flex-direction은 `column` 입니다.
row
row-reverse
column
column-reverse

https://velog.io/@rhsok823/Flex

오늘의 CSS

css 오랫만에 해서 햇갈렸는데

id는 #
class는 .

박스를 만들고 중앙으로 정렬하려고

  position: relative;
  justify-content: center;
  align-items: center;

했는 데 가운데 정렬이 되지 않았다.
display : flex;를 설정하지 않아서 flex박스가 되지 않았기 때문에 css 속성이 적용되지 않았던 것 같다.

JSX에서는 클래스라는 단어를 사용할 수 없습니다 ! 대신 className 을 사용해야 합니다.