[과제] 연습과제 - 01 : SNS 친구

다음은 SNS 친구들의 목록이다. 친구에 대한 정보를 화면에 렌더링하기 위해 Friend컴포넌트를 정의해 보자.

1. Friend 컴포넌트는 클래스형 컴포넌트이다.
2. Friend 컴포넌트는 부모로부터 name, age, city를 props 로 전달받아서 화면에 해당 데이터를 렌더링 한다.
3. 그런다음 APP 컴포넌트에서 Friend 컴포넌트를 가져와서 사용한다.

(선택사항) 아래 친구 목록을 화면에 보여주기 위해서는 Friend 컴포넌트를 friend 배열의 갯수만큼 재사용 해야한다.

const friends = [
    {name: 'victoria', age: 13, city: 'seoul'},
    {name: 'sun', age: 34, city: 'busan'},
    {name: 'johseb', age: 25, city: 'busan'},
    {name: 'syleemomo', age: 9, city: 'seoul'},
    {name: 'hannah', age: 41, city: 'daegu'},
    {name: 'shara', age: 37, city: 'seoul'},
    {name: 'martin', age: 28, city: 'daegu'},
    {name: 'gorgia', age: 39, city: 'seoul'},
    {name: 'nana', age: 24, city: 'busan'},
    {name: 'dannel', age: 19, city: 'seoul'},
]

해답 1

Friend 컴포넌트는 다음과 같다.

import React from "react";

class Friend extends Comment {
render(){
    const {name, age, city}=this.props

    return (
        <>
        <h3>{name}</h3>
        <h4>{age}</h4>
        <h4>{city}</h4>
        <h4>----------------</h4>
        </>
        )
    }
}

export default Friend;

App 컴포넌트는 다음과 같다.

import React from "react";
import Friend from './Friend'

function App() {
    return (
        <div className="App">
            <Friend name="Victoria" age="13" city="seoul"/>
            <Friend name="sun" age="34" city="busan"/>
            <Friend name="johseb" age="25" city="busan"/>
            <Friend name="syleemomo" age="9" city="seoul"/>
            <Friend name="hannah" age="41" city="daegu"/>
            <Friend name="shara" age="37" city="seoul"/>
            <Friend name="martin" age="28" city="daegu"/>
            <Friend name="gorgia" age="39" city="seoul"/>
            <Friend name="nana" age="24" city="busan"/>
            <Friend name="dannel" age="19" city="seoul"/>
        </div>
    );
}

export default App;

해답 2

Friend 컴포넌트는 해답 1과 같다.

import React, { Component } from "react";
import Friend from './Friend';

const friends =[
    {name: 'victioria', age: 13, city: 'seoul'},
    {name: 'sun', age: 34, city: 'busan'},
    {name: 'johseb', age: 25, city: 'busan'},
    {name: 'syleemomo', age: 9, city: 'seoul'},
    {name: 'hannah', age: 41, city: 'daegu'},
    {name: 'shara', age: 37, city: 'seoul'},
    {name: 'martin', age: 28, city: 'daegu'},
    {name: 'gorgia', age: 39, city: 'seoul'},
    {name: 'nana', age: 24, city: 'busan'},
    {name: 'dannel', age: 19, city: 'seoul'},
]

export default class App extends Component {
    render() {
        return (
            <>
            {friends.map((friend, id) => {
                return <Friend key={id} name={friend.name} age={friend.age} city={friend.city}/>
            })}
            </>
        )
    }
}