[RN] 앱을 만들어보자, React Native! - 기본적인 Component .01

안녕하세요! RyuWoong입니다.

포스팅이 조금 늦어졌습니다! 원래 Navigation을 포스팅하려다가 생각해보니까 기본적인 Component 이야기를 해야할 것 같아서, 새롭게 작성한다고 그만..! 그럼 본론으로 들어가도록 하죠.

React Native(이하 RN)에서 View를 구성할 땐 Web과 다른 독자적인 Component를 사용합니다.

자! 그럼 어떤 Component들이 있는지 살펴 볼까요? 공식문서 내 여기서🙋 볼 수 있습니다.

깨알 같은 Tip도 많으니 도움이 됐으면 좋겠습니다.

---

Components

ActivityIndicator

로딩 시 빙글빙글 돌아가는 애니메이션을 보신 적 있을 겁니다. 그것을 만드는 컴포넌트입니다. 자주 보시죠?

 

 

Button

버튼입니다. 하지만 실질적으로 거의 사용하지 않습니다. 이유는 Android 환경과 iOS환경에서 해당 컴포넌트가 다르게 보이기 때문입니다. 그래서 아래서 설명할 Pressable, TouchableOpacity, TouchableWithoutFeedback 등으로 대체하여 사용합니다.

 

List Components

RN에서는 Web과 다르게 다양한 List Component가 있습니다. 스크롤이 되는 화면을 원하면 해당 컴포넌트를 사용해야하는데요. 크게 ScrollView와 FlatList 두개가 있습니다. 둘 중 무엇을 사용해야할까요?

ScrollView와 FlatList의 큰 차이는 렌더링 방식에 있습니다.

ScrollView은 View안에 있는 모든 것을 한번에 렌더링 합니다. 따라서 내용이 많으면 렌더링 하는데 자원을 많이 사용하기 때문에 성능이 저하됩니다. 반면 FlatList는 보이는 부분을 먼저 렌더링하며, 화면 밖은 스크롤된 항목은 제거해 최적화 해줍니다. 또 무한 스크롤을 사용할 때 FlatList에 필요한 함수들이 다 존재하기때문에 웬만한 경우는 FlatList를 사용하는 것을 먼저 고려해 보는 것이 좋습니다!

List와 관련된 내용은 이야기할 게 많으니 따로 포스팅 하도록 하지요!

미리 스포일러를 하자면 FlatList는 Virtualized List 중에 하나로, Section List도 있습니다.

Image

Web의 img태그와 유사한 Component입니다. 네트워크나 데이터이미지인 경우는 일반적으로 사용할 수 있지만, 프로젝트 내 이미지 에셋을 사용한다면, require함수를 함께 사용해야합니다.

//네트워크 또는 데이터 이미지를 사용하는 경우
<Image src={{uri: '네트워크 경로 또는 데이터 이미지'}} />


//이미지 에셋을 직접 사용 하는 경우
<Image src={require('./src/assets/image/dummy.png')} />

만약 이미지를 조건에 따라 다르게 사용하고 싶다면 경로만 조건으로 변경하는게 아닌 require을 포함해야합니다.

<Image src={selected ? require('./src/assets/image/open.png') : require('./src/assets/image/close.png') }/>

추가로 aspect-ratio를 사용하기 위해서는 height에 undefined 값을 꼭! 줘야합니다.

 

ImageBackground

배경이미지를 사용하고 싶으면 사용할 수 있는 컴포넌트입니다. 꼭 해당컴포넌트를 사용하지 않더라도 구현하는 방법이 다양한 구현 방법이 있기 때문에 필요하다면 선택하여 사용하면 됩니다.

 

KeyboardAvoidingView

RN에서 소소하게 짜증나는 점이 존재하는데 그 중 하나가 이 키보드가 올라올때 처리 방법입니다. 만약 화면 내 TextInput 컴포넌트가 있어서 키보드가 올라오는 경우 키보드로 인해서 화면 내 컴포넌트가 가려지는데, 이때 화면을 어떻게 할지 설정할 수 있는 Component입니다. 유심히 봐야할 점은 Behavior 내 padding, height, position 속성들 입니다. 키보드가 올라올 때 어떻게 처리할지에 대한 이야기는 따로 포스팅 하도록 하겠습니다.

 

Modal

Web에서 Modal, Dialog와 유사한 Component입니다. Modal이 visible되면 Modal 아래 깔린 화면에 터치할 수 없습니다. 또 iOS에서 Modal은 두 개 이상 띄울 수 없습니다. UIUX 흐름상 Modal이 이어지는 기획이 존재할 수 있는데 이때는 첫 화면을 Modal 대신 Absolute View로 대신하거나 하는 방법을 사용하는 방법을 고민해봐야 합니다.

 

Pressable

추가 된지 얼마 안된 따끈따끈한 Component 입니다. 짧은 터치부터 긴 터치, 터치 끝 등 다양한 Press입력을 감지하는 Component입니다. 이전에는 버튼 Component를 만들때 TouchableWithoutFeedback, TouchableOpacity 같은 Component를 사용 했는데 이제는 해당 컴포넌트로 대체하여 사용하면 될 것 같습니다.

 

// 간단한 버튼 만들기
<Pressable onPress={handlePress}>
	<Text>나는 버튼 </Text>
</Pressable>

 

RefreshControl

화면 맨 상단에서 아래로 당길 때 목록이 새로고침 되는 경우를 보신 적 있을까요? 그때 새로고침 아이콘 역할을 해주는 Component입니다. ScrollView나 FlatList와 함께 사용합니다.

 

StatusBar

휴대폰 맨 위에 항상 있는 상태바를 의미합니다.

해당 Component는 View안에서 작성하기 보다 useEffect 내에서 컨트롤 하는게 좋습니다.

어느 때 주로 사용하나면, 이동한 화면의 배경색이 검은색 또는 흰색이여서 StatusBar 색상이 겹치면 StatusBar가 잘 보이지 않기 때문에 색상을 변경해 줍니다.

useEffect(()=> {
	StatusBar.setBarStyle('dark-content')

	return ()=> 	StatusBar.setBarStyle('light-content')

},[])

 

Switch

흔히 볼 수 있는 On/Off 스위치 Component입니다. 만약 크기를 조절하고 싶다면, Scale을 사용해서 조정하는 방식을 이용합니다.

 

Text

문자열을 보여주는 Component입니다. RN 내에서 string은 항상 Text Component내에서만 작성할 수 있습니다.

// 일반적으로 아래와 같이 사용합니다.

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


//이 경우 에러가 발생합니다.
//hi는 문자열입니다 따라서 아래 코드는 문자열이 Text 밖에 있는 상태가 됩니다.

const hi = '안녕하세요'

{hi? <Text>{hi}</Text>}

 

TextInput

문자열을 입력 받을 수 있는 Component입니다. Dark Mode 여부에 따라 PlaceHolder, fontColor 그리고 Android인 경우 Font 내 Padding에 영향을 받기에 Font를 적용 후 이상이 없는지 확인 할 필요가 있습니다.

 

Touchable*

Pressable에 비해 단순하게 onPress만 처리합니다. 다른 점이라면 터치 시 각기 다른 Animation 효과가 있습니다.

 

View

Web의 div 같은 Component입니다. 기본 값으로 flex가 적용되어 있습니다.

해당 Component로 레이아웃을 설계할 수 있습니다. 

 

SafeAreaView

iOS를 위한 추가적인 View Component입니다. SafeArea라는 iphone X부터 생긴 노치를 위해 Margin이 들어가 있는 View입니다. 일반적으로 해당 Component를 상단에서 적용하고 내부에 View를 넣어 레이아웃을 설계합니다. 또한 Background Color를 변경하면, iOS 상태바 배경색이 영향을 받습니다.

 

 

이정도면 대부분의 Component를 알아 본 것 같네요. Component 중 추가적으로 알면 좋은 내용 들은 따로 포스팅 하도록 하겠습니다.

추가로, RN은 프로젝트 정상적으로 실행 하는 것이 시작의 절반 이라고 말할 수 있습니다. 설정 환경, SDK와의 버전 차이로 인한 충돌 등이 엄청난 에러를 뿜어내며 프로젝트가 실행되지 않는 경우가 많기 때문입니다. 에러 메세지 또한 명확하지 않아서 엄창나게 많은 에러메세지 속에서 키워드를 찾아서 해결해야 하기 때문에 오랜 삽질을 하게 될 가능 성이 높습니다. 삽질하다보면 멘탈 나갑니다.

 

그래도 꽤 메리트 있는 프레임 워크이기 때문에 잘 배우면 좋을거 같습니다!