화면 전용 컴포넌트의 이름을 지을 때 꼭 Screen으로 끝날 필요는 없지만, 이렇게 이름을 지어 놓으면 추후 중복되는 컴포넌트 이름 때문에 헷갈리는 일을 방지할 수 있습니다. 예를 들어, 사용자 프로필에 관련한 기능을 구현할 때 ProfileScreen 화면 전용 컴포넌트와 Profile이라는 UI 전용 컴포넌트가 둘 다 열려있어도 어떤 게 화면 전용 컴포넌트인지 에디터에서 쉽게 구분할 수 있으니까요.

지금 이 컴포넌트에 ‘Detail 열기’라는 Button이 있으나 아직 버튼을 눌렀을 때 호출되는 onPress는 설정하지 않았습니다. 이 Props는 나중에 설정해주겠습니다.

그다음 만들 컴포넌트는 DetailScreen입니다. 이 화면은 HomeScreen에 있는 버튼을 눌렀을 때 보일 화면입니다.

screens/DetailScreen.js

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

function DetailScreen() {
  return (
    <View>
      <Text>Detail</Text>
    </View>
  );
}

export default DetailScreen;