React Native 2-1. 카카오톡 친구목록 클론코딩(4): 친구목록 상단 컴포넌트들

인덱스페이지

인덱스페이지 화면(탭 구현 전)

export default function HomeScreen() {
  const [isFriendSectionOpen, setIsFriendSectionOpen] = useState(true);

  return (
    <View style={styles.container}>
      <Header />

      {/* 컴포넌트별 간격 지정시 명시적으로 height주는게 좋음 */}
      <Margin height={6} />

      <Profile
        source={myProfile.source}
        name={myProfile.name}
        introduction={myProfile.introduction}
      />

      <Margin height={10} />
      <Division />
      <Margin height={10} />

      <FriendSection
        friendProfileLen={friendProfiles.length}
        onPress={() => setIsFriendSectionOpen(!isFriendSectionOpen)}
        isOpen={isFriendSectionOpen}
      />
      {/* isOpen이 true일 때만 FriendList 컴포넌트가 보이도록 설정 */}
      {isFriendSectionOpen && <FriendList friendProfiles={friendProfiles} />}
    </View>
  );
}

리액트네이티브에서는 재사용성과 유지보수성 향상을 위해
마진과 보더(Division)를 따로 컴포넌트화해서 사용한다고 하는게 신기했다.

웹과 다른 UI/스타일링 패턴을 따로 글로 정리해봐야겠다.

Margin 컴포넌트

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

interface MarginProps {
    height: number
}
const Margin = (props: MarginProps) => {
  return <View style={{ height: props.height }} />;
};

export default Margin

사용은 <Margin height={10} /> 이렇게 하는데,
크기 단위는 기본적으로 dp(device-independent pixels)임.

웹에서는 px, %, rem 등을 사용하는데
리액트네이티브에서는 dp로 자동변환된다고함.
단위를 사용하지 않고 숫자만 사용해서 표기한다.

Division 컴포넌트

import React from 'react'
import { View } from 'react-native'

const Division = () => {
  return (
    <View style={{ height: 0, borderBottomWidth: 0.5, borderBottomColor: 'lightgrey', width: "100%" }} />    
  )
}

export default Division

마진에서 height받았다면 Division에서는 width를 받아도될듯

FriendSection 컴포넌트: 친구목록 상단 count, toggle

 <FriendSection
        friendProfileLen={friendProfiles.length}
        onPress={() => setIsFriendSectionOpen(!isFriendSectionOpen)}
        isOpen={isFriendSectionOpen}
      />

친구수, onPress, isOpen내려줌

import { MaterialIcons } from '@expo/vector-icons';
import React from 'react';
import { Text, TouchableOpacity, View } from "react-native";

interface FriendSectionProps {
  friendProfileLen: number;
  onPress: () => void;
  isOpen: boolean;
}
const FriendSection = (props: FriendSectionProps) => {
  return (
    <View
      style={{
        flexDirection: "row",
        justifyContent: "space-between",
        width: "100%",
      }}
    >
      <Text style={{ color: "grey" }}>친구 {props.friendProfileLen}</Text>
      <TouchableOpacity onPress={props.onPress}>
        <MaterialIcons name={props.isOpen ? "keyboard-arrow-up" : "keyboard-arrow-down"} size={24} color="grey" />
      </TouchableOpacity>
    </View>
  );
};

export default FriendSection

버튼 눌렀을때 친구목록 열렸다닫혔다 할거고 아이콘도 위아래 바뀔것