Home 화면의 타이틀 텍스트가 잘 변경됐나요?

헤더를 커스터마이징하는 두 번째 방법은 화면 컴포넌트에서 navigation.setOptions 함수를 사용하는 것입니다. HomeScreen 컴포넌트를 열어 코드를 다음과 같이 변경해보세요.

screens/HomeScreen.js

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

function HomeScreen({navigation}) {
  useEffect(() => {
    navigation.setOptions({title: '홈'});
  }, [navigation]);
  return (...);
}

export default HomeScreen;

여기서 useEffect Hook을 사용했습니다. 이 Hook은 특정 값이 바뀔 때 또는 컴포넌트가 화면에 나타났을 때 우리가 원하는 작업을 할 수 있다고 배웠죠? 현재 이 함수의 deps(두 번째 인자에 넣는 배열)에는 navigation이 들어있는데요. 이 객체가 바뀌는 일은 없지만 ESLint(자바스크립트 검사 도구) 규칙상 useEffect 내부에 사용하는 값을 꼭 deps에 넣어야 하기 때문에 포함시켰습니다.