9.5.9 내 프로필 화면 구현하기

이번에는 내 프로필 화면을 구현해보겠습니다. 하단 탭에서 우측에 있는 사용자 아이콘을 눌렀을 때 보여주는 화면이지요.

작업은 간단합니다. MyProfileScreen에서 현재 사용자의 정보를 조회하고, 사용자의 id를 Profile 컴포넌트의 userId Props로 지정해 컴포넌트를 보여주면 됩니다.

screens/MyProfileScreen.js

import {useNavigation} from '@react-navigation/native';
import React from 'react';
import {useEffect} from 'react';

import Profile from '../components/Profile';
import {useUserContext} from '../contexts/UserContext';

function MyProfileScreen() {
  const {user} = useUserContext();
  const navigation = useNavigation();

  useEffect(() => {
    navigation.setOptions({
      title: user.displayName,
    });
  }, [navigation, user]);

  return <Profile userId={user.id} />;
}

export default MyProfileScreen;