profile에서 컴포넌트가 몇개 들어갈지 생각하고 넣어주자. header같은 props도 미리 넣어주자.
더미데이터도 만들어주고
// profile.js
import React from 'react';
import Head from 'next/head';
import AppLayout from '../components/AppLayout';
import NicknameEditForm from '../components/NicknameEditForm';
import FollowList from '../components/FollowList';
const Profile = () => {
const followerList = [{ nickname: 'jay' }, { nickname: '바보' }, { nickname: '노드버드초짜' }];
const followingList = [{ nickname: 'jay' }, { nickname: '바보' }, { nickname: '노드버드초짜' }];
return (
<>
<Head>
<title>내 프로필 | NodeBird</title>
</Head>
<AppLayout>
<NicknameEditForm />
<FollowList header="팔로잉 목록" data={followingList}/>
<FollowerList header="팔로워 목록" data={followerList}/>
</AppLayout>
</>
);
};
export default Profile;이제 세부구현을 해줘보자. 컴포넌트 폴더안에 NicknameEditFrom.js와 FollowList.js를 만들어준다.
// NicknameEditForm.js
const NicknameEditForm = () => {
};
export default NicknameEditForm;// FollowList.js
const FollowList = () => {
};
export default FollowList;form을 계속해서 만들다보면 굉장히 비효율적이라는 것을 느낄 수가 있다. 그러므로 나중에는 리액트 폼 라이브러리를 사용하자.
아래에 Input안에 있는 props 같은 경우는 antd 공식문서를 보고 사용하자.(외우지 말자.)
style는 useMemo를 써서 적용한다.
useMemo를 쓰기 귀찮으면 styled-components식으로 해도되고 css를 임포트해서 css모듈이나 sass같은 것들을 가져온다.
// NicknameEditForm.js
import React, { useMemo } from 'react';
import { Form, Input } from 'antd';
const NicknameEditForm = () => {
const style = useMemo(() => ({ marginBottom: '20px', border: '1px solid #d9d9d9', padding: '20px'}))
return (
<Form style={style}>
<Input.Search addonBefore="닉네임" enterButton="수정"/>
</Form>
)
};
export default NicknameEditForm;FollowList.js도 아래와 같이 작성해준다. return 안에 있는 props들은 공식문서를 꼭 보자. 외우지말자.
아래 보면 icons는 antd가 아니라 antd icons에서 가져오는데 여기를 참고하자.
그리고 아래와 같이 style과 grid size등 객체를 넣고 한거는 나중에 최적화를 해줘야 한다.
// FollowList.js
import React from 'react';
import { Button, Card, List } from 'antd';
import PropTypes from 'prop-types';
import { StopOutlined } from '@ant-design/icons';
const FollowList = ({ header, data }) => {
return (
<List
style={{ marginBottom: 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.nickname} />
</Card>
</List.Item>
)}
/>
)
};
FollowList.propTypes = {
header: PropTypes.string.isRequired,
data: PropTypes.array.isRequired,
}
export default FollowList;
<출처 조현영: [리뉴얼] React로 NodeBird SNS 만들기>
[리뉴얼] React로 NodeBird SNS 만들기 - 인프런 | 강의
리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다., 새로 만나는 제로초의 리액트 노드버
www.inflearn.com
'React > NodeBird(ZeroCho)' 카테고리의 다른 글
| redux설치 (0) | 2021.10.26 |
|---|---|
| 회원가입 페이지 만들기(커스텀 훅) (0) | 2021.09.17 |
| noreferrer&noopener (0) | 2021.09.17 |
| 더미 데이터로 로그인 (0) | 2021.09.17 |
| 리렌더링 이해하기 (0) | 2021.09.17 |