만약 바로 반환하는 값이 객체 타입이라면 객체를 소괄호로 감싸줘야 합니다.

// const createObject = (a, b) => { return {a, b}; };
const createObject = (a, b) => ({a, b})

소괄호로 감싸지 않으면 객체로 인식하지 않고 코드 블록으로 이해하기 때문에 오류가 발생합니다.

이번에는 DetailScreen 컴포넌트에서 내비게이션을 설정해보겠습니다. 이전에 HomeScreen 컴포넌트를 변경한 것과 유사합니다.

screens/DetailScreen.js

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

function DetailScreen({route, navigation}) {
  useEffect(() => {
    navigation.setOptions({
      title: `상세 정보 - ${route.params.id}`,
    });
  }, [navigation, route.params.id]);

  return (...);
}

(...)

이번에는 useEffect 내에서 route.params.id를 사용하기 때문에 deps 배열에 해당 값도 포함했습니다. App 컴포넌트에서 Detail 화면에 설정한 options를 지워도 정상적으로 타이틀 텍스트가 설정되는지 확인해보세요.