React SNS 2-6. 프로필 화면 만들기

프로필 화면을 만들어 보겠습니다.

프로필 이미지

profile.js

import React from 'react';
import { Form, Button , List , Input, Card , Icon} from 'antd';
const Profile = () =>{
    return (
        <div>
            <Form style={{marginBottom : '20px' , border : '1px solid #d9d9d9', padding: '20px'}}>
                <Input addonBefore="닉네임" />
                <Button type="primary">수정</Button>
            </Form>
            <List 
                style={{marginBottom : '20px'}}
                grid={{gutter : 4, xs : 2, md: 3}}
                size="small"
                header={<div>팔로잉 목록</div>}
                loadMore={<Button style={{width:'100%'}}>더 보기</Button>}
                bordered
                dataSource={['dog','vel','oper']}
                renderItem={item => (
                    <List.Item style={{marginTop: '20px'}}>
                        <Card actions={[<Icon key="stop" type="stop"/>]}><Card.Meta description={item} /></Card>
                    </List.Item>
                )}
            />
            <List 
                style={{marginBottom : '20px'}}
                grid={{gutter : 4, xs : 2, md: 3}}
                size="small"
                header={<div>팔로워 목록</div>}
                loadMore={<Button style={{width:'100%'}}>더 보기</Button>}
                bordered
                dataSource={['dog','vel','oper']}
                renderItem={item => (
                    <List.Item style={{marginTop: '20px'}}>
                        <Card actions={[<Icon type="stop"/>]}><Card.Meta description={item} /></Card>
                    </List.Item>
                )}
            />
        </div>
    );
};

export default Profile;

배열안에 jsx를 쓸땐 key 가 꼭 필요합니다. 

파일들 안에 if문 또는 반복문 사이의 코드들은 나중에 최적화를 위해 모두 컴포넌트화 시키겠습니다.

 

출처 : https://www.youtube.com/channel/UCp-vBtwvBmDiGqjvLjChaJw

ZeroCho TV