ImageBackground

이미지 위에 글씨나 다른 컴포넌트를 올리고 싶을 때 사용하는 배경 이미지 컨테이너이다. 웹 CSS의 background-image와 비슷하다. View 안에 Image를 넣고 position: absolute로 띄우는 귀찮은 작업을 미리 해놓은 컴포넌트라고 보면 된다.

핵심 특징

• 컨테이너 역할 : 내부에 자식 컴포넌트(Text, View 등)를 넣을 수 있다.
• 스타일 분리 : 컨테이너 자체의 스타일(style)과 배경 이미지의 스타일(imageStyle)을 따로 설정할 수 있다.

주요 Props

• source (필수) : 보여줄 이미지 경로다. (Image 컴포넌트와 똑같다.)
• resizeMode : 이미지를 영역에 어떻게 맞출지 정한다. (cover, contain 등. 보통 배경이니까 cover를 많이 쓴다.)
• style : 이 컴포넌트 전체(컨테이너)의 크기나 자식 정렬을 잡을 때 쓴다. (width, height, justifyContent 등)
• imageStyle : 실제 이미지 자체에 스타일을 주고 싶을 때 쓴다. (예: opacity, borderRadius 등)

RefreshControl

사용자가 화면을 아래로 당겼을 때 데이터를 새로고침하는 "Pull to Refresh" 기능을 제공하는 컴포넌트이다. 단독으로 쓰이는 게 아니라, ScrollView나 FlatList의 refreshControl 속성(Prop) 안에 넣어서 사용해야 한다. iOS와 Android 각각의 네이티브 스피너(로딩바) 스타일을 그대로 보여준다.

핵심 특징

• 상태 관리 필수 : 당기고 있는 동안 로딩 바가 계속 돌아가야 할지, 멈춰야 할지를 결정하는 refreshing 상태(State)가 반드시 필요하다.
• 비동기 처리 : 보통 onRefresh 함수에서 서버 API를 호출하고, 응답이 오면 refreshing을 false로 바꿔서 로딩 바를 없애는 식으로 짠다.

주요 Props

• refreshing (필수) : 로딩 표시기(스피너)를 보여줄지 말지 결정하는 boolean 값이다. (true면 뺑글뺑글 돈다.)
• onRefresh (필수) : 사용자가 화면을 당겼을 때 실행될 함수다. 여기서 데이터 갱신 로직을 돌린다.
• colors (Android 전용) : 로딩 바의 색상을 배열로 지정할 수 있다. (예: ['red', 'blue'] 하면 색이 변하면서 돈다.)
• tintColor (iOS 전용) : 로딩 바의 색상을 지정한다.

KeyboardAvoidingView

가상 키보드가 올라올 때, 화면이 키보드 뒤로 숨지 않고 위로 밀려 올라가거나 줄어들도록 자동으로 조정해 주는 뷰(View)다.
PC 웹과 달리 모바일은 키보드가 화면의 30~40%를 차지한다. 맨 아래에 있는 입력창을 누르면 키보드가 툭 튀어나와서 입력창을 덮어버리는데, 이걸 방지하기 위해 사용한다. 주로 로그인 화면, 댓글 입력창, 채팅 화면 등에서 필수적으로 쓰인다.

핵심 특징

• 플랫폼별 동작 차이
  • ios : 이 컴포넌트가 거의 필수다. 기본적으로 키보드가 올라와도 화면이 꿈쩍도 안 하기 때문이다.
  • Android : AndroidManifest.xml 설정(windowSoftInputMode="adjustResize")에 따라 OS가 알아서 처리해 주는 경우가 많다. 그래서 안드로이드에서는 이 컴포넌트를 쓰면 오히려 화면이 두 번 밀려 올라가는 이상한 현상이 생길 수 있으니 주의해야 한다.
• 유연한 대처 : 화면을 위로 밀어 올릴지(padding), 뷰의 높이를 줄일지(height), 위치를 옮길지(position) 선택할 수 있다.

주요 Props

• behavior (핵심): 키보드에 어떻게 반응할지 결정한다.
  • 'padding' : 키보드 높이만큼 뷰 아래에 패딩을 추가해서 내용을 위로 밀어 올린다. (가장 많이 쓰고 추천하는 방식이다.)
  • 'height' : 뷰의 전체 높이를 키보드 높이만큼 줄인다.
  • 'position' : 뷰의 위치 자체를 위로 옮긴다.
• keyboardVerticalOffset
  • 키보드와 입력창 사이의 간격을 미세 조정할 때 쓴다.
  • 특히 화면 상단에 헤더(Header)나 네비게이션 바가 있다면, 그 높이만큼 값을 줘야 입력창이 키보드 바로 위에 예쁘게 붙는다.
  • enabled : 기능을 켤지 끌지 설정한다. (기본값 true)