React-Native 필수 태그 정리

필수 컴포넌트(태그) 한 번에 이해하기 – 예제 코드로 끝내기

 

import { StatusBar } from "expo-status-bar";
import { Button, FlatList, Text, TextInput, TouchableOpacity, View, StyleSheet } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

export default function ReactNativeTagsPage() {
  const onPressButton = () => {
    alert("버튼을 누르셨군요!");
  };

  const onChangeText = (text: string) => {
    console.log(text);
  };

  const onScroll = () => {
    console.log("스크롤이 내려갔어요!");
  };

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "red" }} edges={["top"]}>
      <StatusBar style="light" />
      <Button title="등록하기" onPress={onPressButton} />
      <TouchableOpacity onPress={onPressButton}>
        <Text>안녕하세요~</Text>
      </TouchableOpacity>
      <TextInput
        onChangeText={onChangeText}
        secureTextEntry={true}
        style={styles.input}
      />
      <View style={styles.boardList}>
        <FlatList
          data={[
            { number: "1", title: "게시글제목1" },
            { number: "2", title: "게시글제목2" },
            { number: "3", title: "게시글제목3" },
            { number: "4", title: "게시글제목4" },
            { number: "5", title: "게시글제목5" },
            { number: "6", title: "게시글제목6" },
            { number: "7", title: "게시글제목7" },
            { number: "8", title: "게시글제목8" },
            { number: "9", title: "게시글제목9" },
            { number: "10", title: "게시글제목10" },
          ]}
          renderItem={({ item }) => (
            <Text>글번호:{item.number}, 글제목:{item.title}</Text>
          )}
          onScroll={onScroll}
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  input: {
    borderWidth: 2,
    borderColor: "blue",
  },
  boardList: {
    height: 100,
    backgroundColor: "yellow",
  },
});

 

이 코드 안에 기본적으로 꼭 알아야 할 컴포넌트들

 

• 화면 안전 영역: SafeAreaView
• 상태바: StatusBar
• 버튼 계열: Button, TouchableOpacity
• 텍스트: Text
• 입력창: TextInput
• 레이아웃 박스: View
• 리스트: FlatList
• 스타일: StyleSheet

---

 

2. SafeAreaView – 노치 영역 피해서 안전하게 보여주기

<SafeAreaView style={{ flex: 1, backgroundColor: "red" }} edges={["top"]}>
  {/* 화면 내용들 */}
</SafeAreaView>

 

SafeAreaView란?

• 아이폰처럼 상단 노치, 하단 홈 인디케이터가 있는 기기들에서
• 내용이 잘리지 않도록 안전한 영역만 사용하도록 도와주는 컴포넌트입니다.
• HTML로 치면 div 비슷한 레이아웃 박스지만,
• “안전 영역(safe area)”를 자동으로 신경 써준다는 점이 다릅니다.

 

 

주요 props

• style={{ flex: 1, backgroundColor: "red" }}
  • flex: 1 : 남아 있는 화면 전체를 꽉 채우겠다는 뜻
  • backgroundColor: "red" : 배경색을 빨간색으로
• edges={["top"]}
  • 어떤 방향의 안전 영역을 적용할지 지정
  • ["top"] → 상단만
  • 필요에 따라 ["top", "bottom"] 같은 식으로도 사용 가능

 

👉 실무에서 팁

화면 전체를 하나 감싸는 최상단 레이아웃은

SafeAreaView를 쓰는 습관을 들이면,

기기마다 이상하게 잘리는 문제를 많이 줄일 수 있습니다.

 

---

 

3. StatusBar – 상단 상태바(시간, 배터리) 스타일 바꾸기

<StatusBar style="light" />

 

StatusBar란?

 

• 화면 맨 위에 있는 시간, 배터리, 안테나 아이콘이 있는 영역이 상태바(Status Bar)입니다.
• StatusBar 컴포넌트로 이 부분의 텍스트 색상 / 스타일을 조정할 수 있습니다.

 

 

주요 props

 

• style="light"
  • 상태바 아이콘·텍스트 색상을 밝은 스타일로 변경
  • 보통 배경이 어두울 때 light를 사용합니다.
  • 반대로 배경이 밝으면 dark를 사용합니다.

 

---

 

4. Button vs TouchableOpacity – 버튼 만들기

 

 

4-1. Button – 기본 버튼 컴포넌트

<Button title="등록하기" onPress={onPressButton} />

 

• 가장 기본적인 버튼
• 플랫폼(iOS/Android)에 맞게 기본 스타일이 적용됩니다.

 

주요 props

 

• title: 버튼에 표시할 텍스트
• onPress: 버튼을 눌렀을 때 실행할 함수

const onPressButton = () => {
  alert("버튼을 누르셨군요!");
};

버튼을 누르면 alert 팝업이 뜨도록 연결해놓은 코드입니다.

 

---

 

4-2. TouchableOpacity – 자유롭게 꾸미는 클릭 영역

<TouchableOpacity onPress={onPressButton}>
  <Text>안녕하세요~</Text>
</TouchableOpacity>

 

• TouchableOpacity는 말 그대로 “터치 가능한 영역”입니다.
• 안에 어떤 것을 넣든지 상관없습니다. (Text, View, 아이콘 등)
• 터치하면 살짝 투명해지는 효과(opacity) 가 들어갑니다.
• 디자인을 자유롭게 하고 싶을 때 자주 사용합니다.

 

주요 props

 

• onPress: 눌렀을 때 실행할 함수

 

여기서는 Button과 같은 onPressButton을 재사용해서

눌렀을 때 똑같이 알림이 뜨도록 했습니다.

 

---

 

5. Text – 화면에 글자를 보여주는 기본 컴포넌트

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

<Text>글번호:{item.number}, 글제목:{item.title}</Text>

 

• HTML의 <p>, <span> 같은 역할
• React Native에서 모든 텍스트는 반드시 Text 컴포넌트 안에 있어야 합니다.
• (그냥 문자열만 쓰면 에러)

 

필요하면 style을 추가해서 크기, 색상, 두께 등을 조절할 수 있습니다.

 

---

 

6. TextInput – 사용자 입력 받기

<TextInput
  onChangeText={onChangeText}
  secureTextEntry={true}
  style={styles.input}
/>

 

TextInput이 하는 일

 

• 로그인 화면의 아이디/비밀번호 입력창, 검색창 등
• 사용자에게 텍스트를 입력받는 모든 곳에서 사용하는 컴포넌트입니다.

 

 

주요 props

onChangeText

const onChangeText = (text: string) => {
  console.log(text);
};

 

• 사용자가 글자를 입력할 때마다 호출됩니다.
• 입력한 값을 바로 state에 넣거나, 콘솔에 찍거나 할 때 사용합니다.
• 지금은 단순히 console.log(text)로 입력 내용을 개발자 도구에 출력하도록 되어 있습니다.

 

secureTextEntry={true}

• true로 설정하면 입력한 텍스트가 ●●●●처럼 보입니다.
• 보통 비밀번호 입력창에서 사용합니다.

 

style={styles.input}

• 아래의 StyleSheet에서 정의한 스타일을 적용합니다.

const styles = StyleSheet.create({
  input: {
    borderWidth: 2,
    borderColor: "blue",
  },
  // ...
});

 

• borderWidth: 2 → 테두리 두께 2
• borderColor: "blue" → 테두리 색 파란색

 

---

 

7. View – 레이아웃 박스(컨테이너)

<View style={styles.boardList}>
  <FlatList
    // ...
  />
</View>

 

• HTML의 <div>와 거의 같은 역할입니다.
• 레이아웃을 잡거나, 배경색을 주거나, 안에 다른 컴포넌트들을 감쌀 때 사용합니다.

 

styles.boardList는 이렇게 정의되어 있습니다.

boardList: {
  height: 100,
  backgroundColor: "yellow",
},

 

• height: 100 → 높이를 100px 정도로 고정
• backgroundColor: "yellow" → 노란색 배경

 

이렇게 해서 “노란 박스 안에 리스트(FlatList)가 있는 구조”가 됩니다.

 

---

 

8. FlatList – 스크롤 가능한 리스트 만들기

<FlatList
  data={[
    { number: "1", title: "게시글제목1" },
    { number: "2", title: "게시글제목2" },
    { number: "3", title: "게시글제목3" },
    { number: "4", title: "게시글제목4" },
    { number: "5", title: "게시글제목5" },
    { number: "6", title: "게시글제목6" },
    { number: "7", title: "게시글제목7" },
    { number: "8", title: "게시글제목8" },
    { number: "9", title: "게시글제목9" },
    { number: "10", title: "게시글제목10" },
  ]}
  renderItem={({ item }) => (
    <Text>글번호:{item.number}, 글제목:{item.title}</Text>
  )}
  onScroll={onScroll}
/>

 

FlatList란? (무한스크롤 제공됨)

 

• 긴 목록을 효율적으로 렌더링해주는 리스트 전용 컴포넌트입니다.
• 스크롤이 가능한 리스트 화면을 만들 때 가장 많이 사용합니다.

 

 

주요 props

data

• 리스트에 보여줄 원본 데이터 배열입니다.
• 여기서는 게시글 번호와 제목을 가진 객체 배열:

data={[
  { number: "1", title: "게시글제목1" },
  { number: "2", title: "게시글제목2" },
  // ...
]}

 

 

 

 

 

renderItem

renderItem={({ item }) => (
  <Text>글번호:{item.number}, 글제목:{item.title}</Text>
)}

 

• data 배열의 각 요소를 어떻게 화면에 보여줄지를 정의하는 함수입니다.
• item에는 현재 렌더링 중인 데이터 객체가 들어옵니다.
• 여기서는 단순히 Text로 “글번호, 글제목”을 한 줄에 보여주게 되어 있습니다.

 

 

 

onScroll

const onScroll = () => {
  console.log("스크롤이 내려갔어요!");
};

 

• 사용자가 리스트를 스크롤할 때마다 호출되는 함수입니다.
• 지금은 단순히 콘솔에 "스크롤이 내려갔어요!" 문자열만 찍습니다.
• 추후에는 무한 스크롤, 특정 지점 도달 감지 등을 할 때 활용할 수 있습니다.

 

---

 

9. StyleSheet – 스타일 모아 관리하기

const styles = StyleSheet.create({
  input: {
    borderWidth: 2,
    borderColor: "blue",
  },
  boardList: {
    height: 100,
    backgroundColor: "yellow",
  },
});

 

StyleSheet를 쓰는 이유

 

• 컴포넌트 안에 style={{ ... }}를 직접 써도 되지만,
• 여러 곳에서 재사용하려면 코드가 지저분해집니다.
• StyleSheet.create를 사용하면
• 스타일을 한 곳에 모아서 이름으로 관리할 수 있습니다.

 

예를 들어:

<TextInput style={styles.input} />
<View style={styles.boardList} />

이렇게 쓰면,

나중에 스타일을 바꾸고 싶을 때

StyleSheet 부분만 수정하면 됩니다.

 

---

 

10. 정리: 이 예제에서 배운 필수 컴포넌트들

 

이 한 파일에서 React Native 기본기를 훑을 수 있습니다.

 

• SafeAreaView : 기기의 안전 영역 안에서 화면을 보여주기
• StatusBar : 상단 상태바 스타일(light/dark) 설정
• Button : 기본 버튼, 간단한 클릭 이벤트 처리
• TouchableOpacity : 디자인 자유도가 높은 터치 가능한 영역
• Text : 화면에 글자를 보여줄 때 반드시 사용하는 컴포넌트
• TextInput : 사용자 입력 받기 (비밀번호 모드, onChangeText 등)
• View : 레이아웃을 나누고 박스를 만드는 기본 컨테이너
• FlatList : 스크롤 가능한 리스트 화면 (data, renderItem, onScroll)
• StyleSheet : 스타일을 깔끔하게 모아서 관리하기