[DEVOCEAN 스쿨] RN(React Native) 스터디 1주차

Teus 23.04.14

2,864 29 1

facebook twitter kakao link

29 1

facebook twitter kakao link

안녕하세요 Teus입니다.

올해부터 DEVOCEAN을 통해서 스터디를 진행하고 있습니다!

제가 준비한 주제는 React를 활용해서 크로스플랫폼을 플랫폼 어플리캐이션을 만드는 React Native입니다!

1. 왜 React Native요?

현재 크로스플랫폼의 대표적인 프래임워크로

React Native.
Flutter

가 있는 상황 입니다.

이때 Flutter의 경우 새로운 Dart라는 언어를 배워야 하기도 하고, 지속적으로 Flutter 2.0, 3.0이 나오고 있는 상황 입니다.

반면 React Native같은 경우 Web FE(FrontEnd)에서 충분히 많이 사용되고 있는 React를 기반으로 하고 있습니다.

덕분에 기존 FE개발자의 경우 큰 무리없이 적응할 수 있을것으로 판단 했고, React Native를 기반으로 스터디를 해보기로 했습니다!(제 사심도 조금 ㅎㅎ...)

2. 스터디 인원 모집하기!

과거 우아한스터디와 Open 카톡방을 통해서 스터디인원들을 모집 하였고,

DEVOCEAN소속 저, 태웅님, 10명의 FE개발자 + 취준생 분들과 함께 3개월 스터디를 진행하게 되었습니다!

3. 무엇을 가지고 공부할 것인가?

스터디 하면 역시 어떤 책으로 할지가 중요합니다.

스터디에 사용될 책을 선정할때

Const형 컴포넌트를 사용
Hook을 사용
다양한 활용 예제
Expo가 아닌 CLI기반으로된 예제

가 있는 책을 선정하고자 했으며, 처음에는 '처음 배우는 리액트 네이티브' 라는 책을 생각 했습니다

그런데, 스터디를 해주시는분들 중 이미 React를 사용하시는 분이 상당수 있었으며, 이를 피드백 하여 새로운 책인 '리액트 네이티브를 다루는 기술'사용하게 되었습니다!

4. 스터디 1주차!

스터디는 서울 을지로입구의 SKT타워에서 진행 되었습니다.

SKT타워 지하2층을 외부에 오픈하여 공유인프라로 사용하고 있는 모습을 볼 수 있었습니다.

저희 스터디같은 경우 해당 공간에서 첫시간 아이스브레이킹을 진행 하였습니다!

(첫만남에는 역시 자기소개)

아이스 브래이킹 후 이제 각자 알아서 스터디 도서를 읽는 시간을 가졌습니다.

문제는 RN스터디가 혼자서 책을읽고 공부하는 시간만으로는 RN스터디에서 많은것을 얻어가기는 힘들수 있다는 생각이 들었습니다(도움주신 태웅님 압도적인 감사 ㅜ)

현재 스터디의 진행을 어떻게해야할지 RN스터디의 운명이 걸린 투표가 진행중 입니다!

(글을 작성하던중 정해진 스터디의 방향성. 다들 열정이 넘쳐요!)

5. 그래서 1주차에 무엇을 배웠나요?

1주차는 사실상 RN의 환경설정 및 React에 대한 복습내용이 주를 이뤘습니다.

결국 React Native가 React기반의 코드를 크로스플랫폼으로 만들어 주는 프래임워크 이기 때문에

React없이 React Native를 익히는건 어렵죠.

그래서 책 초반에는 React Native 환경구축 + React 컴포넌트 기초 + Hook에 대한 내용이 나와있습니다.

기존 React를 사용하는 환경과는 다르게 안드로이드, IOS 시뮬레이션이 필요하기 때문에 안드로이드 스튜디오 설치 및 XCODE 설치를 필요로 합니다

JSX와 JavaScript를 사용하는것은 동일하지만, React Native같은 경우 기본 컴포넌트를 react-native 라이브러리에서 가지고 오게 됩니다

import React from 'react';
import {SafeAreaView, View, Text} from 'react-native';

const App = () => {
  return (
    <SafeAreaView>
      <View>
        <Text>Hello React!</Text>
      </View>
    </SafeAreaView>
  );
};

export default App;

보면 react같은 경우 기존에 최외곽에 <View> component가 있었지만, React-Native에서는 모바일 환경의 상단바와 Notch등을 고려하기 위해서 최외곽에 새로운 component가 추가되게 됩니다.

마지막으로 크로스플랫폼 이지만, OS에 따른 조건부 코드작성이 필요한것을 알 수 있었습니다.

1.

안드로이드의 경우 StatusBar 컴포넌트를 통해서 상단바의 색을 변경할 수 있지만, IOS의 경우 SafeAreaView를 통해서 상단여백을 제거하고, 그만큼을 색상을 가진 View로 채워야 합니다.

//안드로이드의 경우
import React from 'react';
import {View, Text, StyleSheet, StatusBar} from 'react-native';

function DateHead({date}) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();

  return (
    <>
    //컴포넌트 상단에 StatusBar의 속성을 통해서 앱의 상태창 색상 변경이 가능
    <StatusBar backgroundColor="#26a69a" />
      <View style={styles.block}>
        <Text style={styles.dateText}>
          {year}년 {month}월 {day}일
        </Text>
      </View>
    </>
  );
}

//IOS의 경우
//App.js
import React from 'react';
import {StyleSheet} from 'react-native';
import DateHead from './components/DateHead';
import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';

function App() {
  const today = new Date();

  return (
    <SafeAreaProvider>
      //하단부에만 SafeArea를 살리고, 상단은 SafeArea에 Contents를 보여주겠다는 내용
      <SafeAreaView edges={['bottom']}>
        <DateHead date={today} />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

//components/DataHead.js
import React from 'react';
import {View, Text, StyleSheet, StatusBar} from 'react-native';
//IOS의 Device별 상단 SafeArea값을 쓰기위한 Custom Hook
import {useSafeAreaInsets} from 'react-native-safe-area-context';

function DateHead({date}) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();

  const {top} = useSafeAreaInsets();

  return (
    <>
    //상단에 SafeArea에 Contents가 표시되지 않게 상단에
    //Device별 SafeArea크기만큼 유색의 공백을 추가함
    <View style={[styles.statusBarPlaceholder, {height: top}]} />
      <StatusBar backgroundColor="#26a69a" />
      <View style={styles.block}>
        <Text style={styles.dateText}>
          {year}년 {month}월 {day}일
        </Text>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  statusBarPlaceholder: {
    backgroundColor: '#26a69a',
  },
  block: {
    padding: 16,
    backgroundColor: '#26a69a',
  },
  dateText: {
    fontSize: 24,
    color: 'white',
  },
});

export default DateHead;

2.

TextInput을 통해서 키보드 Input이 떴을 때 안드로이드는 자동으로 화면이 축소되고 키보드가 올라오지만, IOS의 경우 키보드가 올라오면서 화면이 변경되지 않습니다. 때문에 이것도 별도로 설정을 해야합니다.

<좌측 : IOS, 우측 : 안드로이드>

해당 문제를 해결하기 위해서 KeyboardAvoidingView 컴포넌트를 사용하고, OS종류에 따른 조건부 렌더링을 통해서 해당 문제를 해결하게 됩니다.

import React from 'react';
import {StyleSheet, KeyboardAvoidingView, Platform} from 'react-native';
import DateHead from './components/DateHead';
import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';
import AddTodo from './components/AddTodo';
import Empty from './components/Empty';

function App() {
  const today = new Date();

  return (
    <SafeAreaProvider>
      <SafeAreaView edges={['bottom']} style={styles.block}>
      //OS에따라서 padding여부를 결정하는 조건부 렌더링 부분
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
        style={styles.avoid}>
        <DateHead date={today} />
        <Empty />
        <AddTodo />
      </KeyboardAvoidingView>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  block: {
    flex: 1,
    backgroundColor: 'white',
  },
  avoid: {
    flex: 1,
  },
});

export default App;