NEXTJSを使用してTwitterをクローンする(4.スタックデータを使用してプロファイルページを完了する)

19572 ワード
nextjs React テキストリンク

構成部品


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;
プロファイル構成部品
NickName EditFormコンポーネント
FollowListコンポーネントporps→header=「注目リスト」data={followList}
FollowsListコンポーネントporps→header=「注目リスト」data={followsList}
このように構成されている
NicknameEditForm.js
エレメントのFormセクションにスタイルセクションを再描画すると、レンダリング時にスタイルセクションを再描画します.
外に出したほうがいい!(最適化のため)
しかし、これは必要ではありません.機能に問題がある場合でも構いません.
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;
Python|桁数の和
Unityのネットワーク機能 UNETを使ってみる