[recap] React Native 훑어보기

[One-HyeWon]

무엇을 알게 되었나요?

React Native

• react-dom의 대체
• 플랫폼이 웹이 아닌 iOS및 Android를 위함

Expo VS React Native CLI

Expo CLI = Expo

Thrid-party service

무료임!!

정리된 앱 개발 워크플로우로 작업할 수 있음

프로젝트 생성이 수월하고, 코드 작성이 수월하며, 네이티브의 카메라 등과 같은 기능 사용이 전반적으로 쉬워짐!

언제든지 중단하기도 쉬움

React Native CLI

그럼 얘 왜 존재?

Expo 존재 전에 나온 툴

기초적인 개발 설정이 존재

여기에 추가적인 구성 및 수정이 필요

기본 툴이 부족하고, 작업이 번거로움 하나하나 수동임

장점은 여러 네이티브 소스 코드(JAVA, Kotilin, Swift … etc.)와 통합하기 쉬움!!

실행하기

iOS - Expo Go 앱을 설치

• VS Code에서 npm start 진행
• Expo 서버 실행
• 개발 서버는 코드를 읽고 구축하여 미리보기가 가능하게 해줌★

바코드 인식 해주기

XCode - iOS 시뮬레이터
Android Studio - Android 스튜디오
각 시뮬레이터에 Expo Go 앱을 깔아줘야 함!

그리고 VS Code의 터미널에서 a, i를 선택해서 어떤 플랫폼의 시뮬레이터에 빌드할 것인지 설정해야 함
android와 ios에서 둘 다 동시에 실행 할 수 있음!

---

컴포넌트

Text, View는 중요한 JSX 컴포넌트임
브라우저에서 사용하는 h1, div등의 컴포넌트 사용 불가
DOM을 가지고 있지 않으니 HTML 요소를 지원하지 않음

React Native가 여러 네이티브 요소를 Android, iOS에 따라 변환하기 때문에 Text, View 컴포넌트가 노출 됨

스타일링

ss가 존재하지 않음
브라우저가 아니기 때문!

대신 스타일을 적용
inline styles를 사용하거나, StyleSheet 객체를 사용

JS에서 스타일을 작성함

css 프로퍼티와 비슷한 JS에서 사용할 수 있는 프로퍼티를 제공

---

컴포넌트 살펴보기

text 문자열은 Text 컴포넌트 안에서 렌더링 되어야 한다

Native 플랫폼은 브라우저보다 엄격함

div와 거의 똑같은 View에는 텍스트를 넣을 수 없음

일반적으로 콘텐츠를 담는 상자나 컨테이너 구축에 사용 됨
view에는 text 컴포넌트로 묶인 텍스트를 넣을 수 있음
텍스트 상자, 버튼, 이미지 등을 넣을 수 있음
다른 컴포넌트를 담을 수는 있지만, 텍스트를 담을 수는 없음

HTML과 핵심 컴포넌트를 비교할 수는 있지만, 다름

View가 유일한 컨테이너 컴포넌트
article, header 등과 같이 추가적으로 존재하지 않음

더 복잡한 인터페이스를 작업 할 때 View를 겁쳐서 사용 할 수 있음
자식 컴포넌트의 배치를 다르게 할 수 있음

Button 컴포넌트는 안에 children이 없고, self closing components임!

title 속성으로 텍스트를 넣어줘야 함

---

스타일 차이

iOS vs Android

  goalItem: {
    margin: 8,
    padding: 8,
    borderRadius: 6,
    backgroundColor: "#530acc",
    color: "white",
  },

이렇게 하면 iOS에서 모서리가 둥글게 처리가 되지 않음
둥근 모서리를 Text 컴포넌트에 직접 적용했기 때문임!

React는 Text 컴포넌트를 해당하는 네이티브 위젯 즉, 네이티브 UI 요소로 전환하는데
Android에서는 전환된 후 둥근 모서리로 나타나지만
iOS에서는 기본 네이티브 텍스트 출력 요소가 둥근 모서리를 지원하지 않음

Web vs Native

       {courseGoals.map((goal) => (
          <View style={styles.goalItem} key={goal}>
            <Text>{goal}</Text>
          </View>
        ))}

그래서 이렇게 View로 한 번 더 감싸주면 되는데, 이렇게 하면 텍스트 color의 색상이 적용 되지 않음

웹 CSS와 다르게 연속적으로 스타일링이 적용되지 않기 때문임

연속적인 속성 적용은 부모와 조상 요소의 스타일이 자식 및 하위 요소에 그대로 이어지는 CSS의 핵심 특성인데 React Native 스타일링은 이러한 접근 방식을 취하지 않아서 스타일 상속이 없음!!

완전히 독립된 요소가 됨

---

아이템 터치 가능하게 하는 법 - Pressable 컴포넌트

React Native에서 제공하는 특정한 컴포넌트인 Pressable 컴포넌트로 감싸야 함!

웹처럼 onClick은 안 먹힘

Button 컴포넌트는 스타일을 적용하는 데 한계가 있기 때문에, Pressable, Touchable 컴포넌트를 사용하여 커스텀 버튼을 만드는 것도 좋은 방법이다

어려운 내용이 있었다면 무엇이고, 이를 어떻게 해결하였나요?

Error: EACCES: permission denied “~~filename.”

https://velog.io/@dahara3/Error-EACCES-permission-denied

해당 블로그 참조하여, RNCourse의 상위 폴더인 ReactNative 폴더에서

sudo chown -R johyewon RNCourse

를 실행하니, 권한이 root에서 전부 johyewon으로 바뀜!

어떤 자료를 참고하였나요?

• https://reactnative.dev/docs [공식문서]
• https://www.udemy.com/course/react-native-2022-ko/learn/lecture/33259842#content [강의]