9.5.4 Profile 컴포넌트 만들기

이제 프로필 화면을 만들어봅시다. 이전에 FeedScreen의 경우 데이터 로딩 및 FlatList 컴포넌트 사용을 화면 컴포넌트에서 바로 처리해줬습니다. 그런데 프로필 화면의 경우에는 Profile이라는 컴포넌트를 만들고 ProfileScreen 화면에서 이 컴포넌트를 사용하는 방식으로 구현하겠습니다.

이렇게 하는 이유는 홈 화면에서 다른 사용자의 프로필을 눌렀을 때는 ProfileScreen을 보여줘야 하고, 하단 탭의 두 번째 탭인 사용자 탭을 누르면 자신의 프로필을 보여주는 MyProfileScreen을 보여줘야 하기 때문입니다. 즉, 프로필이 보여지는 화면이 두 개이기 때문에 Profile 컴포넌트를 따로 만드는 것입니다.

Profile 컴포넌트를 다음과 같이 만들어보세요.

components/Profile.js

import React, {useEffect} from 'react';
import {useState} from 'react';
import {
  ActivityIndicator,
  FlatList,
  Image,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {getPosts} from '../lib/posts';
import {getUser} from '../lib/users';

function Profile({userId}) {
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState(null);

  useEffect(() => {
    getUser(userId).then(setUser);
    getPosts({userId}).then(setPosts);
  }, [userId]);
  if (!user || !posts) {
  return (
      <ActivityIndicator style={styles.spinner} size={32} color="#6200ee" />
    );
  }

  return (
    <FlatList
      style={styles.block}
      ListHeaderComponent={
        <View style={styles.userInfo}>
          <Image
            source={
              user.photoURL
                ? {
                  uri: user.photoURL,
                }
              : require('../assets/user.png')
            }
            resizeMode="cover"
            style={styles.avatar}
          />
          <Text style={styles.username}>{user.displayName}</Text>
        </View>
      }
    />
  );
}

const styles = StyleSheet.create({
  spinner: {
    flex: 1,
    justifyContent: 'center',
  },
  block: {
    flex: 1,
  },
  userInfo: {
    paddingTop: 80,
    paddingBottom: 64,
    alignItems: 'center',
  },
  avatar: {
    width: 128,
    height: 128,
    borderRadius: 64,
  },
  username: {
    marginTop: 8,
    fontSize: 24,
    color: '#424242',
  },
});

export default Profile;