카카오톡 클론코딩 친구리스트 만들기

<개요>

친구 리스트 만들 때는 

내 프로필과 구분되는 division 선을 두고, 

그 밑에는 친구와 친구 명 수 나타내는 구간이 필요하다. (FriendSection)

그리고 친구 리스트를 토글 할 수 있는 화살표가 필요하다. 

 

친구 리스트는 data.js에 저장된 임시 데이터들을 가져와 사용한다. (FriendList)

임시 데이터들은 객체가 배열로 정렬되어 있다. 

 

 

1. 코드 리뷰 

(1) App.js 에서 모듈 간의 관계 한 번에 보기

    <View style={styles.container}>
      <Header />
      <Margin height = {10}/>
      <Profile
        uri={myProfile.uri}
        name={myProfile.name}
        introduction={myProfile.introduction}
      />
      <Margin height={15}/>
      <Division/>

      <Margin height={12}/>

      <FriendSection
        friendProfileLen = {friendProfiles.length}
        onPressArrow={onPressArrow}
      />

      <FriendList
        data = {friendProfiles}
      />
      
    </View>
    
 //onPressArrow 로직은 아직 안 짰고, 클릭시 로그에 뜨는 것만 만들었다.   
 const onPressArrow = () => {
    console.log("clicked arrow")
  }

친구 리스트 배열의 길이는 친구리스트를 저장해놓은 배열 friendsProfile.length로 받음.

(2) Division

import { View } from "react-native";

export default () => {
  return (
    <View style = {{width: "100%", height: 0.5, backgroundColor: "lightgrey"}}/>
  )
}

/*width: 100%는 부모 컴포넌트의 너비 영역 전체를 차지 하겠다는 소리이다.*/

(3) FriendSection

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

export default (props) => {
  return (
    <View style={{flexDirection: "row", justifyContent: "space-between"}}>
      <Text style={{color: "grey"}}> 친구 {props.friendProfileLen}</Text>

      <TouchableOpacity onPress={props.onPressArrow}>
      <MaterialIcons name="keyboard-arrow-down" size={24} color="lightgrey" />
      </TouchableOpacity>

    </View>
  )
}

ㄱ. 배열 이름 다음에 Len을 붙이면 해당 배열의 길이가 반환된다. 

ㄴ. <TouchableOpacity> 태그 이 태그로 감싼 것들은 사용자의 터치에 응답할 수 있게 된다. 

      사용자가 눌렀을 시, 감싼 내용의 불투명도가 감소해서 흐려진다.  (클릭한 것을 실감하게 만들어 주는 것임.)

ㄷ. 안 쪽에는 저번에 봤던 Icon 사이트를 이용한 것. 

@expo/vector-icons@13.0.0

@expo/vector-icons directory

(4) FriendList 

import { ScrollView, View } from "react-native"
import { getBottomSpace } from "react-native-iphone-x-helper"
import Margin from "./Margin";
import Profile from "./Profile"

const bottomSpace =getBottomSpace();

export default (props) => {
  return(
    <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{paddingBottom: bottomSpace}}>
      
      {props.data.map((item, index) => (
        <View key={index}>
          <Profile
          uri={item.uri}
          name={item.name}
          introduction={item.introduction}
          />

          <Margin height={13}/>
        </View>
      ))}
    </ScrollView>
  )
}

ㄱ. ScrollView의 속성인 showsVerticalScrollIndicator는 스크롤 할 때 오른편에 얼마나 스크롤 했는지 보여주는 Bar 생성을 할 것인가 말 것인가를 나타낸다. 

ㄴ. ScrollView의 속성 contentContainerStyle에 대해 

Scroll View에서 그냥 style 속성으로 꾸밀 때도 있고, content ContainerStyle로 꾸밀 때도 있는데 이 둘의 차이는 무엇인가?

react native - style Vs contentContainerStyle in ScrollView? - Stack Overflow 참조

Scroll View에는 두 가지 측면이 있다. 

ScrollView의 틀을 담당하는 회색(Container) 부분과 

안의 내용물을 담당하는  파랑 부분(Content) 이다. 

 

Container 부분은 부모 요소의 크기 이상 커질 수 없으며 고정되어 있다. 

이 안에서 scroll 하는 Content 부분은 부모 요소보다 커질 수 있지만, 화면에 보이는 부분은 Container에 스크롤로 들어와 있는 부분 한정이다. 

 

여기서 그냥 Style 속성을 써서 Styling을 하면, 이거는 Container(회색)부분에 대해 작업하겠다는 것이다. 이것의 높이나 형제 요소들과의 관계를 조정할 수 있다. 

여기서 contentContainerStyle을 쓰면 Content (파랑) 부분에 대해 작업하겠다는 것이다. 내용물들의 padding (회색 요소로 부터 여백을 얼마나 줄것인가?), item들의 정렬 등을 다룬다. 

 

ㄷ. Scroll View에서 쓸 수 있는 함수 map ((item, index) => {return: 어떤 로직에 item을 넣은 결과에 대한 배열})

첫 번째 인자인 item에는 배열의 요소들이 하나씩 차례대로 들어간다. 

두 번째 인자인 index는 지금 들어온 배열의 요소의 순서이다. 

return 문에는 배열의 원소를 넣어 사용하는 로직이 온다. 

반환되는 값은 해당 로직의 결과들을 모은 배열이다. 

 

위에서도 item에 친구들의 프로필 사진, 이름, 소개글 정보를 받았다.

이 인자들을 Profile이라는 모듈에 하나씩 넣어 나온 결과들을 배열로 만들어 반환 했다. 

 

해당 예시에서는 retrun문을 안 썼는데, return {} 대신에 그냥 () 이것도 쓸 수 있구나 정도로 인지하자. 

2. 스스로 해보기 

homeless-Api에다가 만들었다.