View

RN 앱을 구성하는 가장 기본적인 컨테이너 컴포넌트이다. 웹으로 치면 <div /> 와 유사하지만, 기본적으로 Flexbox 레이아웃, 방향은 column으로 적용되어있다는 점이 다르다.

핵심 특징

• 레이아웃의 기본 단위 : 다른 컴포넌트(Text, Image 등)을 감싸거나, 레이아웃 구조 (행, 열)을 잡을 때 사용한다.
• Flexbox 기본 적용 : View는 기본적으로 display: flex 가 적용되어 있으며, flexDirection 의 기본값은 웹과 달리 column 이다. tailwind 로 치면 flex flex-col 이 기본으로 적용되어 있는 것이다.
• 중첩 가능 : View 안에 또 다른 View 를 무한히 중첩하여 더 복잡한 UI를 만들 수 있다.
• 터치 이벤트 지원 : onTouchStart, onTouchEnd 등의 저수준 터치 이벤트를 감지할 수 있다. 단, 클릭 동작은 주로 <Pressable /> 또는 <Touchable /> 등을 사용한다.

주요 Props

• style : width, height, backgroundColor, margin, padding 등 스타일을 정의한다.
• hitSlop : 실제 UI 크기보다 터치 영역만 확장하고 싶을 때 사용한다. 버튼이 작을 때 유용하다.
  예 : hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
• onLayout: 컴포넌트가 렌더링 된 후 위치(x, y)나 크기(width, height)를 측정해야 할 때 사용한다.
• pointerEvents : 뷰가 터치 이벤트를 받는 방식을 제어한다.
• 'box-none' : 뷰 자체는 터치를 무시하지만, 자식 컴포넌트는 터치 가능하다
• 'none' : 뷰와 자식 모두 터치 무시한다.

Text

React Native에서 글자를 화면에 출력하는 유일한 방법이다. 웹에서는 <div>안녕하세요</div>가 가능하지만, React Native에서는 반드시 <Text>안녕하세요</Text> 로 감싸야 한다.

핵심 특징

• 스타일 상속 (Nesting) : Text 컴포넌트 안에 Text를 중첩하면, 부모 Text의 스타일(폰트, 색상 등)을 자식이 상속받는다. (View 안의 Text는 View의 스타일을 상속받지 않는다.)
• 플랫폼별 폰트 : iOS와 Android의 기본 폰트 시스템을 따르며, 커스텀 폰트 적용이 가능하다.

주요 Props (속성)

• numberOfLines : 텍스트가 지정된 줄 수를 초과할 경우 말줄임표로 표시한다.
• ellipsizeMode : 말줄임표의 위치를 지정한다. (head, middle, tail, clip)
  보통 numberOfLines와 함께 사용된다.
• selectable : true로 설정하면 사용자가 텍스트를 길게 눌러 복사할 수 있다. (기본값은 false)
• onPress : 텍스트를 눌렀을 때 이벤트를 실행한다. (간단한 링크나 "더 보기" 버튼 등에 유용)
• allowFontScaling: false로 설정하면 기기의 시스템 폰트 크기 설정(접근성)을 무시하고 고정된 크기로 보여준다. (디자인 깨짐 방지용으로 쓰이나 접근성 측면에서 주의 필요)
• pointerEvents : 뷰가 터치 이벤트를 받는 방식을 제어한다.
  • 'box-none': 뷰 자체는 터치를 무시하지만, 자식 컴포넌트는 터치 가능.
  • 'none': 뷰와 자식 모두 터치 무시한다.

Image

앱에 이미지(사진, 아이콘 등)를 표시하기 위한 컴포넌트이다. 웹의 <img> 태그와 비슷해 보이지만, 이미지 경로를 지정하는 방식과 사이즈 처리에서 중요한 차이가 있다.

핵심 특징

• Source 관리 (source) : 웹의 src 대신 source props를 사용한다.
• 네트워크 이미지 사이즈 필수 : 로컬 이미지는 크기를 자동으로 인식하지만, URL로 불러오는 이미지는 반드시 width와 height를 스타일로 지정해야만 화면에 보인다. (가장 많이 하는 실수이다.)
• 캐싱 지원: iOS와 Android의 기본 캐싱 정책을 따른다.

React에서의 이미지는 경로를 간단하게 src, 절대경로, import 등으로 구현했었는데, React Native 에서는 그렇지 않다. 어떤 이유에서의 차이가 있는 것일까?