작은 시작점

ScrollView

<View style={styles.goalsContainer}>
    <ScrollView alwaysBounceVertical={false}>
      {courseGoals.map((goal) =>
        <View key={goal} style={styles.goalItem}>
          <Text style={styles.goalText}>{goal}</Text>
        </View>
      )}
    </ScrollView>
  </View>

ScrollView는 전체 UI가 렌더링 될 때마다 안에 있는 항목 전부 렌더링 한다.

목록이 일정 화면을 넘어가 길어질 때, 화면에 보이지 않는 부분도 화면 뒤에서 계속 렌더링 된다.

목록이 길다면, 수천개, 수만개의 목록이 있다면?  성능 문제가 생길 수 밖에 없다.

그래서 분량이 제한된 콘텐츠에는 적합하지만, 길어질 수 있는 동적 목록에는 부적합하다.

사용할 수는 있지만,  동적 목록 리스트에는 성능 저하를 피하기 위해 잘 안 씀

이럴 때 ScrollView 대신에 사용할 수 있는 것이 FlatList이다.

FlatList

스크롤을 실현하는 컴포넌트

보이는 항목만 렌더링되며, 화면 밖의 항목은 사용자가 스크롤을 해야 로딩 및 렌더링 된다.

내부에서 필요한 항목만 렌더링, 나머지는 스크롤해서 가까이 다가갈 때 렌더링

목록이 아주 긴 경우에 적합 !

필요한 사항만 렌더링하는 방식으로 목록을 효율적으로 렌더링 한다.

☆  필수 프로퍼티

data : 목록에서 출력할 데이터를 지정하는 역할, 배열 형태로 제공

renderItem : 매개변수로 현재 항목에 대한 정보를 받아 해당 항목을 어떻게 렌더링할지 결정

렌더링 해야할 때 개별적으로 함수 호출하여 주어진 항목에 대해 렌더링 할 jsx 코드로 반환

KeyExtractor : 각 항목에 대해 고유한 키를 추출

<FlatList
      data={courseGoals}
      renderItem={(itemData) => {
        return (
          <View style={styles.goalItem}>
            <Text style={styles.goalText}>{itemData.item.text}</Text>
          </View>
        )
      }}
      keyExtractor={(item, index) => {
        return item.id
      }}
      alwaysBounceVertical={false} />

data의 courseGoals 배열을 renderItem에서 각 항목(itemData)으로 받아온다.

해당 항목을 어떻게 렌더링 할지에 대한 jsx 코드가 있고, 각 항목에 대해 개별적으로 호출되어 목록 전체를 렌더링

courseGoals의 배열의 각 항목은 객체로 정의되어 있으며,

 {
    text: enteredGoalText, id: Math.random().toString()
  }

text의 값에는 내가 입력한 목표, id는 고유한 키(랜덤 값)가 들어가 있는 것을 확인할 수 있다.

ScrollView 코드와 비교해보면 map 함수를 통해 목록을 수동으로 렌더링하지 않는다는 것을 알 수 있다.

<Text key={goal} style={styles.goalItem}>{goal}</Text>

위의 코드에 goalItem 스타일을 적용해보았을 때, 안드로이드, ios를 비교해보면

안드로이드에는 적용이 되었지만 ios는 적용이 되지 않은 것을 볼 수 있다.

ios에는 테두리를 둥글게 하는 속성이 적용이 되지 않았다.

ios에서 기본 네이티브 <Text> 태그에 둥근 모서리 스타일을 지원하지 않는 것이다.

이러한 경우, View 태그로 <Text>태그를 감싸서 View 태그에 지정해주면 된다.

<View key={goal} style={styles.goalItem}>
	<Text>{goal}</Text>
</View>

Text 태그에 바로 스타일을 지정하지 않고 View 태그를 감싼 후 View 태그에 스타일을 지정해주었더니

ios에도 둥근 테두리가 적용이 되었다. 하지만 뭔가 다른 점은 ..  이번에는 텍스트 색상이 적용되지 않았다.

그 이유는 웹용 css와 달리 스타일이 연속적으로 적용되지 않기 때문이다.
연속적인 속성 적용은 부모와 조상 요소의 스타일이 자식 및 하위 요소에 그대로 이어지는게 특징인데
React Native 스타일링에는 스타일 상속이 없다.

그러므로, View 태그에 적용된 color:white는 하위 속성인 text 태그에 영향을 주지 않게 되는 것이다.

그래서 이러한 경우는 별도로 Text 태그에 color:white를 지정해주어야한다.

<View key={goal} style={styles.goalItem}>
	<Text style={styles.goalText}>{goal}</Text>
</View>

이렇게 Text 태그에도 별도로 스타일을 지정해주고, 지정된 goalText 스타일에 color:white을 적용했다.

그랬더니 이제는 ios, android가 동일하게 맞추어졌다.

상속여부와 ios에서 지원되지 않는 것들이 안드로이드와 달라서 같은 코드를 적용함에도 불구하고 적용되지 않는 부분들이 있다. 이것 말고도 다른 것들이 많을 것 같은데 ,, 공부하면서 발견할 때마다 잊지 않도록 기록해야겠다.

리액트와 리액트 네이티브는 비슷한 듯 다르다.

핵심적으로 알아야할 컴포넌트들 비교하고 스타일링 적용하는 방법을 알아보자

<div>  VS  <View>

리액트의 <div></div>태그, 리액트 네이티브의 <View></View>태그의 용도는 같다.

하지만 주의해야할 점은

<div>안녕하세요</div>

div 태그 내 텍스트 안녕하세요 >> 가능

<View>안녕하세용</View>

View 태그 내 텍스트 안녕하세용 >> 불가능

View
콘텐츠를 담는 상자나 컨테이너 구축에 사용됨.
다른 컴포넌트들을 담을 순 있지만 단순 텍스트를 담을 수 없다.
<Text> 태그로 감싸주면 활용 가능.

View : 컴포넌트를 담고 배치하는 컴포넌트

Text : 텍스트를 표시

Button : 버튼 등

다양한 핵심 컴포넌트들은 공식 홈페이지에서 찾아 활용하는 것을 추천

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

리액트와 정말 비슷하다.

스타일 적용하는 방법

React Native는 CSS 지원하지 않음.

파일을 추가하거나 css 언어를 사용하지 않는다.

1. 인라인 스타일 추가해서 스타일 객체를 프로퍼티로 전달
2. 별도의 객체를 정의해서 프로퍼티로 전달

1. 인라인 스타일 방식

말 그대로 태그 안에 스타일을 적용하는 방식이다. 하지만 좋은 방식은 아니다.

jsx 코드와 스타일 코드의 구분이 명확하지 않기 때문. 가독성도 떨어짐.

2. 별도의 객체를 정의해서 프로퍼티로 전달

stylesheet 객체 사용,  JSX 코드와 스타일 코드를 명확히 구분해줌. 스타일 재사용 가능

dummyText라는 객체 안에 스타일을 정의해서 Text 태그의 프로퍼티로 전달한 것을 알 수 있다.

동일한 스타일을 두군데 작성하고 싶을 때 단순하게 프로퍼티만 전달하면 되기 때문에 그 부분에서도 간편하다.

꿀팁 사이트

색상 설정 및 사용하는 다양한 방식

https://reactnative.dev/docs/colors

컴포넌트가 지원하는 스타일 프로퍼티

https://reactnative.dev/docs/view-style-props 

Flex Box

CSS에서 Flex Box 속성을 잘 아는 사람에게는 익숙할 것이다.

위에서 스타일을 적용하는 방식대로 적용하고, Flex를 사용해 레이아웃을 배치한다.

여기서 한가지 다른 점이 있다.

Flex의 기본 배치 방향은 Default가 row인데

리액트 네이티브에서는 특이하게도? Column 방향이 Default였다.

별도로 명시하지 않으면 View들이 세로로 쌓이는 것을 보면 이해가 되는 부분이다.

여기서 추가로 알아야할 점은 display:flex는 View의 기본 속성이라는 점이다.(기본 속성이 flex인 게 좀 신기하다.)

div 태그는 block 속성인데, View 태그는 Flex 속성인 것도 차이점으로 알아두면 좋을 것 같다.

그래서 별도의 스타일을 적용하지 않아도 Column 방향으로 정렬된다.

SearchContainer을 보면 기본으로 flex가 적용되어있으니 기본적으로 display: flex와 같은 스타일은 따로 지정해주지 않고

바로 배치방향을 가로 방향으로 변경했다. 그리고 다른 속성들 사용 방법은 동일하다.

굳이 다른 점은 스타일이 카멜케이스로 작성되어있다는 점이다.

이런 부분은 바로 눈에 보여서 리액트와 다르다는 것을 바로 알수 있는 부분이다.

리액트와 알게 모르게 다른 부분이 있어서 헷갈리는 부분이 있는 것 같지만,

리액트를 잘 다룰 줄 안다면 이런 주의사항만 잘 숙지해서 바로 개발에 들어가도 괜찮을 것 같다.

그리고 생각보다 차이점들을 하나 둘 씩 알아가는게 재밌는 것 같다.

리액트와 리액트 네이티브의 사용법 차이 위주로 헷갈리는 부분들을 중심으로 글을 작성해야겠다.

초기세팅은 React와 React Native가 많이 다르지 않다.

React Native 시작하기 겁먹어서 계속 미루고 있었는데 왜 그랬나 싶을 정도로 비슷하고 쉽다.

윈도우 초기세팅 입니다 ~!

Node.js 설치

https://nodejs.org/en

최신 버전 말고 안정적인 버전으로 설치하는 것을 추천한다.

나는 이미 깔려 있기에 확인만 하고 패스!

npx create-expo-app 프로젝트명

https://reactnative.dev/docs/environment-setup

리액트 네이티브 공식 홈페이지에 초기세팅 하는 부분이 잘 나와있다.

npx create-expo-app first_native_app

먼저 프로젝트를 생성하고,

cd first_native_app

생성한 폴더로 이동한다. 

cd 명령어는 change directory라고 쉽게 생각하면 된다!

npx expo start

이후 프로젝트를 실행하면 된다.

qr 코드와 press 키보드~ 어쩌고가 뜨는데 이건 아래에서 더 알아볼거다.

일단 이렇게 잘 뜬다면 프로젝트 생성부터, 서버 실행까지 완료된 것!

이제는 내가 만들 앱을 볼 에뮬레이터를 실행할 차례다.

만드는 앱이 어떻게 생기고 어떻게 돌아가는지 알아야하니까 봐야겠죠?

안드로이드 스튜디오 설치

위에 말했지만 나는 윈도우다.  맥은 잘 모름 ㅎㅎ

먼저 안드로이드 앱을 실행하기 위해 안드로이드 스튜디오를 설치한다.

https://developer.android.com/studio/install?hl=ko

설치 후 More Action > Virtual Device Manager 들어가서

디바이스가 없다면 Create device에서 장치를 하나 만들어 주면 된다.

이후 다시 VSCode로 돌아가서 터미널을 보면

Press a | open Android 가 보일 것이다

a를 누르면 저렇게 초록색으로 뭔가 성공되었다는 느낌의 무언가가 출력된다.

이후 안드로이드 앱이 실행되고 로딩되면서 핸드폰이 딱 ! 뜨게 된다!!

잘 연결되었는지 확인하기 위해 App.js의 텍스트를 변경해본다. 잘된다. 얏호

expo Go

이번엔 실제 핸드폰에 화면을 볼 것이다. 참고로 난 아이폰이다.

App Store에서 expo Go를 설치한다. 로그인하고 보니 난 이미 계정이 연결되어있는지

VSCode에서 실행하고 있는 프로젝트가 상단에 떴다.

그래서 이것도 수월하게 되나보다 했는데 웬걸 인터넷 연결 오프라인 어쩌고 하면서 실패 ㅠㅠ

서버도 켜져있고, 연결도 잘 된 것 같은데 왜이러나 싶었는데...

문제는 와이파이 연결이었다. 내 PC 와이파이랑 핸드폰 와이파이랑 동일한 와이파이로 연결하니 바로 됐다.

이렇게 앱을 만들기 전,

프로젝트 생성부터 안드로이드로도, 아이폰으로도 확인할 수 있게 초기세팅을 해보았다.

원래 초기세팅할 때는 애먹어야되는데 뭔가 수월하게 진행되어서 기분이 좋으면서도 뭔가 모를 불안감.. ㅎㅎ

암튼 초기세팅 성공! 이거 보시고 다른 분들도 수월한 세팅하시길 바랍니다. 그럼 안뇽