props 객체 인수로 카톡 프로필 및 친구 목록 만들기

<Überblick>

소품을 사용하여 각 개체에 대해 서로 다른 값을 조정하는 작업을 해왔습니다.

내 프로필 사진이 더 큽니다.

프로필마다 사진과 이름이 다릅니다.

콘텐츠를 Props 개체의 인스턴스 변수로 가져와 다르게 사용자 정의했습니다.

1. 코드 리뷰

import React from 'react';
import { Image, ScrollView, StyleSheet, View, Text } from 'react-native';

/**
 * Header
 * MyProfile
 * Division
 * FriendSection
 * FriendList
 */

const Header = (props) => {
    return <Text>{props.title}</Text>
}
//변동사항인 이름, 카톡프로필, 프로필 사이즈는 속성으로 써서 props로 보냄.
const MyProfile = () => {
  return <Profile 
          name="수민" 
          uri="https://www.sisain.co.kr/news/photo/202110/45791_82634_4851.jpg"
          profileSize={40}
          />;
}

const Division = () => {
  return <Text> Division</Text>
}

const FriendSection = () => {
  return <Text> FriendSection</Text>
}

const FriendList = () => {
  return (
    <View>
      <Profile  
        name="명현" 
        uri="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0Yr6EHXBuyFT758YQZJIfRS-OxlHLe_xLpmjfq51POfIrnezVU4RRjEPUrbxCI-62hqo&usqp=CAU"
        profileSize={30}
      />
      <Profile  
        name="민혁" 
        uri="https://cdn.healthinnews.co.kr/news/photo/202204/29034_29822_2928.jpg"
        profileSize={30}
      />
      <Profile  
        name="상로" 
        uri="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhPp9xC6b6117NcTAyvXr5rw0jwhBp-l3_CrjegZByjEzObtv0AXEbgy8LvorDqf3CKmI&usqp=CAU"
        profileSize={30}
      />
      <Profile  
        name="재욱" 
        uri="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9-fJsY_Vm3jmGZh0ZRdIW6c8xcGfNkfhHkpKpKLl1W0ac7luUWx-DTawzIP_dU8ljcWA&usqp=CAU"
        profileSize={30}
      />
      <Profile  
        name="규범" 
        uri="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxZTogMJ6-sBn0-3YBTCsUGSWFjDX_LOpiw_wQ8hEQamKuG4QZeZqQXSWARGetJ9B0CL4&usqp=CAU"
        profileSize={30}
      />
    </View>
  )
}

/*함수형 컴포넌트로 표현 */
// const Profile = (props) => {
//   return(
//     <View style={{flexDirection: "row"}}>
//       <Image source={{
//           uri: props.uri
//           }}
//           style={{
//             width: props.profileSize,
//             height: props.profileSize,
//           }}          
//           />
//       <Text>{props.name}</Text>
//     </View>
//   )
// }

/*클래스형 컴포넌트로 표현 */
// profile 만드는 곳, 변동 사항이 있는 것들은 모두 상위 폴더에서 props로 받음.
class Profile extends React.Component{
  render(){
    return  (
        <View style={{flexDirection: "row"}}>
      <Image source={{
          uri: this.props.uri
          }}
          style={{
            width: this.props.profileSize,
            height: this.props.profileSize,
          }}          
          />
      <Text>{this.props.name}</Text>
    </View>  
    )
  }
};


//Main
export default function App() {
  return (
    <View style={styles.container}>
      <Header title="친구목록"/>
      <MyProfile/>
      <Division/>
      <FriendSection/>
      <FriendList/>
    </View>
  )
}




const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

2. 직접 해보세요

import { setStatusBarBackgroundColor } from "expo-status-bar";
import react from "react";
import { Image, View, Text, StyleSheet } from "react-native";

const Header = (props) => {
  return<Text>{props.title}</Text>
}

const MyProfile = () => {
  return(
    <Profile
      name = "수민"
      uri = "https://i.ytimg.com/vi/qDhOhTtPLng/maxresdefault.jpg"
      fontSize = {40}
    />
  )
}

const Division = () => {
  return(
    <Text>Division</Text>
  )
}

const FriendSection = () => {
  return(
    <Text>FriendSection</Text>
  )
}

const FriendList = () => {
  return(
    <View>
    <Profile
      name = "지훈"
      uri = "https://www.sisain.co.kr/news/photo/202110/45791_82634_4851.jpg"
      fontSize = {40}
    />
        <Profile
      name = "민혁"
      uri = "https://cdn.healthinnews.co.kr/news/photo/202204/29034_29822_2928.jpg"
      fontSize = {40}
    />
        <Profile
      name = "상로"
      uri = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqKqzXig2zL4ZUAvFgNqn1VG4vxsj3rUoIwvSCy_mATvLxYrbUHiXLSVCwAq_MRoSxAKg&usqp=CAU"
      fontSize = {40}
    />
        <Profile
      name = "재욱"
      uri = "http://www.newsjinju.kr/news/photo/202101/16352_20174_1135.jpeg"
      fontSize = {40}
    />
        <Profile
      name = "규범"
      uri = "https://blog.kakaocdn.net/dn/c7dQje/btrAb9oL0Ke/WAad01aEfiHJdnyVaZBe4K/img.png"
      fontSize = {40}
    />

    </View>
  )
}

const Profile = (props) => {
  return(
    <View style={{flexDirection: "row"}}>
      <Image source={{
        uri: props.uri
      }}
        style = {{
          width: props.fontSize,
          height: props.fontSize
        }}
        />
    <Text>{props.name}</Text>
    </View>
  )
}

export default function App() {
  return (
    <View style={styles.container}>
      <Header title="친구목록"/>
      <MyProfile/>
      <Division/>
      <FriendSection/>
      <FriendList/>
    </View>
  )
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

CSS는 적용되지 않았지만 Style이 아닌 View Styles의 속성이라고 했기 때문입니다. 30분 정도 걸렸다.