React SNS 2-7. 컴포넌트 분리하기

컴포넌트를 분리하면 여러가지 장점이있다. 

캡슐화 , 확장성 , 결합성 , 재사용성 , 가독성 등등.. 여러가지 장점이 있기때문에 컴포넌트를 분리를 해줍니다.

반복문 , 조건문 , 폼 안의 엘리먼트 들을 분리해주었습니다.

 

components 폴더 안에 js 파일을 생성합니다.

 

NicknameEditForm.js

import React from 'react';
import { Form, Button ,Input} from 'antd';

const NicknameEditForm = () => {
    return (
        <Form style={{margin : '10px 0 20px' , border : '1px solid #d9d9d9', padding: '20px'}}>
            <Input addonBefore="닉네임" />
            <Button type="primary">수정</Button>
        </Form>
    );
}
export default NicknameEditForm;

PostCard.js

import React from 'react';
import {Button, Card , Icon , Avatar} from 'antd';
import PropTypes from 'prop-types';

const PostCard = ({ post }) =>{
    return (
        <Card
            key={+post.createdAt}
            cover={post.img && <img alt="example" src={post.img} />}
            actions = {[
                <Icon type="retweet" key="retweet" />,
                <Icon type="heart" key="heart" />,
                <Icon type="message" key="message" />,
                <Icon type="ellipsis" key="ellipsis" />,
            ]}
            extra={<Button>팔로우</Button>}
        >
            <Card.Meta
                avatar={<Avatar>{post.User.nickname[0]}</Avatar>}
                title={post.User.nickname}
                description={post.content}
            />
        </Card>
    );
}

PostCard.proTypes = {
    post : PropTypes.shape({
        User : PropTypes.object,
        content : PropTypes.string,
        img: PropTypes.string,
        createdAt:PropTypes.object,
    }),
};

export default PostCard;

PostForm.js

import React from 'react';
import { Form , Input , Button} from 'antd';

const dummy = {
    isLoggedIn : true,
    imagePaths: [],
    mainPosts : [{
        User : {
            id : 1,
            nickname : "Dogveloper",
        },
        content : "첫번째 게시글",
        img : 'https://source.unsplash.com/random',
    }],
}

const PostForm = () =>{
    return (
        <Form style={{margin : "10px 0 20px"}} encType="multipart/form-data">
        <Input.TextArea maxLength={140} placeholder="리엑트 재밌다.." />
        <div>  
            <input type="file" multiple hidden />
            <Button>이미지 업로드</Button>
            <Button type="primary" style={{float:'right'}} htmlType="submit">짹짹</Button>
        </div>
        <div>
            {dummy.imagePaths.map((v,i) =>{
                <div key={v} style={{display:'inline-block'}}>
                    <img src={'http://localhost:3000'+ v} style={{width : '200px'}} all={v} />
                    <div>
                        <Button>제거</Button>
                    </div>
                </div>
            })}
        </div>
    </Form>
    );
}

export default PostForm;

UserProfile.js

import React from 'react';
import {Card , Avatar } from 'antd';

const UserProfile = () => {
    return (
        <Card
            actions={[
                <div key="twit">짹짹<br/>{dummy.Post.length}</div>,
                <div key="following">팔로잉<br/>{dummy.Followings.length}</div>,
                <div key="follower">팔로워<br/>{dummy.Followers.length}</div>,
            ]}
        >
        <Card.Meta 
            avatar={<Avatar>{dummy.nickname[0]}</Avatar>}
            title={dummy.nickname}
        />
    </Card>
    );
}
export default UserProfile;

index.js(수정)

import React from 'react';
import PostForm from '../components/PostForm';
import PostCard from '../components/PostCard';

const dummy = {
    isLoggedIn : true,
    imagePaths: [],
    mainPosts : [{
        User : {
            id : 1,
            nickname : "Dogveloper",
        },
        content : "첫번째 게시글",
        img : 'https://source.unsplash.com/random',
    }],
}
const Home = () =>{
    return (
        <div>
            {dummy.isLoggedIn && <PostForm />}
            {dummy.mainPosts.map((c) => {
                return (
                    <PostCard key={c} post={c}/>
                );
            })}
        </div>
    );
};

export default Home;

profile.js(수정)

import React from 'react';
import { Button , List , Card , Icon} from 'antd';
import NicknameEditForm from '../components/NicknameEditForm';
const Profile = () =>{
    return (
        <div>
            <NicknameEditForm />
            <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;

AppLayout.js(수정)

import React from 'react';
import Link from 'next/link';
import {Menu, Input , Row , Col } from 'antd';
import PropTypes from 'prop-types';
import LoginForm from './LoginForm';
import UserProfile from './UserProfile';

const dummy = {
    nickname : 'Dogveloper',
    Post : [],
    Followings : [],
    Followers : [],
    isLoggedIn : false,
};

const AppLayout = ({children}) =>{
    return (
        <div>
            <Menu mode="horizontal">
                <Menu.Item key="home"><Link href="/"><a>노드버드</a></Link></Menu.Item>
                <Menu.Item key="profile"><Link href="/profile"><a>프로필</a></Link></Menu.Item>
                <Menu.Item key="mail">
                    <Input.Search enterButton style={{verticalAlign:'middle'}} />
                </Menu.Item>
            </Menu>
            <Row gutter={10}>
                <Col xs={24} md={6} >
                    {dummy.isLoggedIn 
                        ? <UserProfile />
                        : <LoginForm />
                    }
                </Col>
                <Col xs={24} md={12} >{children}</Col>
                <Col xs={24} md={6} >Made By Dogveloper</Col>
            </Row>
            
        </div>
    );
};

AppLayout.propTypes = {
    children : PropTypes.node,
};

export default AppLayout;

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

ZeroCho TV