React Native 기본 컴포넌트 정리: View, Text, Image부터 제대로 이해하기

Expo 프로젝트 구조를 한 번 훑어봤다면
이제 진짜로 화면을 만드는 단계로 들어간다.

React Native에서 화면은
컴포넌트 조합으로 만들어진다.

처음엔 태그 이름이 낯설어서 헷갈리지만,
몇 개만 정확히 이해해두면
이후 UI 작성이 훨씬 수월해진다.

이 글에서는
가장 기본이 되는 컴포넌트 3가지를
실무 기준으로 정리한다.

---

이 글이 필요한 사람

• React Native 화면 코드가 아직 낯선 경우
• <View>와 <Text> 역할이 헷갈리는 경우
• 웹의 <div>처럼 생각해도 되는지 궁금한 경우

---

React Native 컴포넌트의 기본 개념

React Native에는
HTML 태그가 없다.

대신,
모바일 네이티브 UI에 대응되는 컴포넌트를 사용한다.

웹처럼 보이지만
실제로는 iOS / Android 네이티브 컴포넌트다.

[이미지: React Native 컴포넌트와 네이티브 UI 매핑 구조]

---

View – 가장 기본이 되는 컨테이너

View는
레이아웃을 잡는 가장 기본 단위다.

웹에서의 div와 거의 같은 역할을 한다.

import { View } from 'react-native';

export default function App() {
  return (
    <View>
      {/* 화면 구성 요소들 */}
    </View>
  );
}

View의 특징

• 다른 컴포넌트를 감싸는 용도
• 스타일링의 기준이 되는 컨테이너
• 화면 레이아웃의 뼈대 역할

React Native 화면의 거의 모든 시작은 View다.

---

Text – 텍스트는 반드시 Text 안에

React Native에서는
텍스트를 그냥 쓸 수 없다.

반드시 Text 컴포넌트 안에 넣어야 한다.

import { View, Text } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>Hello React Native</Text>
    </View>
  );
}

⚠️ 주의

// ❌ 에러 발생
<View>
  Hello
</View>

이건 웹에서는 되지만
React Native에서는 동작하지 않는다.

Text의 특징

• 모든 문자열은 Text 안에 있어야 함
• 스타일도 Text 기준으로 적용
• Text 안에 Text 중첩 가능

---

Image – 이미지를 표시하는 방법

이미지를 표시할 때는 Image 컴포넌트를 사용한다.

import { Image } from 'react-native';

<Image
  source={require('./assets/icon.png')}
  style={{ width: 100, height: 100 }}
/>

Image에서 꼭 기억할 점

• width, height 지정 필수
• 로컬 이미지: require()
• 원격 이미지: uri 사용

https://example.com/image.png' }}
  style={{ width: 100, height: 100 }}
/>

Image가 안 보일 때
대부분은 사이즈를 안 줬을 때다.

---

실제로 가장 많이 쓰는 기본 조합

이 세 가지는 거의 항상 함께 쓰인다.

import { View, Text, Image } from 'react-native';

export default function App() {
  return (
    <View>
      <Image
        source={require('./assets/icon.png')}
        style={{ width: 80, height: 80 }}
      />
      <Text>React Native 시작하기</Text>
    </View>
  );
}

이 코드 하나만 봐도
React Native 화면 구조의 기본 흐름은 드러난다.

---

웹 개발자라면 이렇게 생각하면 편하다

웹React Native

div	View
span, p	Text
img	Image

완전히 같은 건 아니지만,
개념적으로는 이렇게 치환하면 이해가 빠르다.

---

실무 기준으로 느낀 포인트

실제로 써보면
이런 점에서 자주 막힌다.

• 텍스트를 View에 바로 쓰려고 함
• Image가 안 보이는데 이유를 모름
• 스타일을 div처럼 생각하다가 헷갈림

이건 전부
React Native가 웹이 아니라는 신호다.

---

정리

• View는 레이아웃의 기본 단위다
• Text는 모든 문자열의 시작점이다
• Image는 반드시 크기를 지정해야 한다
• 웹과 비슷하지만, 동일하지는 않다

다음 글에서는
StyleSheet와 Flexbox를 이용한 레이아웃 잡기로
본격적으로 화면을 정리해볼 예정이다.