컴포넌트 구성
profile.js
import AppLayout from "../components/AppLayout";
import Head from "next/head";
import NicknameEditForm from "../components/NicknameEditForm";
import FollowList from "../components/FollowList";
const Profile = () => {
const followerList = [
{ nicname: "제로초" },
{ nicname: "이재훈" },
{ nicname: "바보" },
];
const followingList = [
{ nicname: "팔로잉" },
{ nicname: "이재훈" },
{ nicname: "바보" },
];
return (
<>
<Head>
<title>내 프로필 | NodeBird</title>
</Head>
<AppLayout>
<NicknameEditForm />
<FollowList header="팔로잉 목록" data={followingList} />
<FollowList header="팔로워 목록" data={followerList} />
</AppLayout>
</>
);
};
export default Profile;Profile 컴포넌트
NicknameEditForm 컴포넌트
FollowList 컴포넌트 porps → header="팔로잉 목록" data={followingList}
FollowList 컴포넌트 porps→ header="팔로워 목록" data={followerList}
이런식으로 구성했습니다.
NicknameEditForm.js
스타일 부분을 컴포넌트 Form 부분에 해주게 되면 리랜더링시 리엑트는 style부분을 다시 그려주기 때문에
밖으로 빼주는게 좋습니다! (최적화를 위해서 )
하지만 필수 사항은 아닙니다. 기능에 문제가있을때 해도 됩니다.
import { Form, Input } from "antd";
import { useMemo } from "react";
const NicknameEditForm = () => {
const style = useMemo(
() => ({
marginTop: "20px",
border: "1px solid #d9d9d9",
padding: "20px",
}),
[]
);
return (
<Form style={style}>
<Input.Search addonBefore="닉네임" enterButton="수정" />
</Form>
);
};
export default NicknameEditForm;FollowList.js
import PropTypes from "prop-types";
import { Button, Card, List } from "antd";
import { StopOutlined } from "@ant-design/icons";
const FollowList = ({ header, data }) => {
return (
<List
style={{ marginTop: 20 }}
grid={{ gutter: 4, xs: 2, md: 3 }}
size="small"
header={<div>{header}</div>}
loadMore={
<div style={{ textAlign: "center", margin: "10px 0" }}>
<Button>더 보기</Button>
</div>
}
bordered
dataSource={data}
renderItem={item => (
<List.Item style={{ marginTop: 20 }}>
<Card actions={[<StopOutlined key="stop" />]}>
<Card.Meta description={item.nicname} />
</Card>
</List.Item>
)}
/>
);
};
FollowList.propTypes = {
header: PropTypes.string.isRequired,
data: PropTypes.array.isRequired,
};
export default FollowList;