카드가 반응형 스타일이 좀 이상하게 됩니다.

[리뉴얼] React로 NodeBird SNS 만들기

프로필 페이지 만들기

작성

587

ㅋ카드가 모양이 제대로 안나옵니다. antd에서 가져오고 딱히 건든건 없는것같은데 무엇이 문제일까요

import React from "react";
import { List, Button, Card } from "antd";
import { StopOutlined } from "@ant-design/icons";
const FollowList = ({ header, data }) => {
  return (
    <List
      style={{ marginBottom: "20px" }}
      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: "20px" }}>
          <Card actions={[<StopOutlined key="stop" />]}>
            <Card.Meta description={item.nickname} />
          </Card>
        </List.Item>
      )}
    />
  );
};
export default FollowList;

react nodejs redux express Next.js

답변 6

CS공부하는사람

   grid={{ gutter:8, column:3 }}

gird의 column 값을 3으로 주면 정렬되네요

오종해

강사님은 웬만하면 100줄 넘어가지 않도록 분리한다.

오종해

실제 위 코딩은 객체이므로 다시 리렌더링이 된다.

시간이 없어서 강사님이 이렇게 코딩한 것.

따로 useMemo 하든지 최적화 진행해야한다.

오종해

 return (
 <List
 style={{ marginBottom: 20 }}
 grid={{ gutter: 4, xs: 2, sm: 2, md: 3, lg: 3, xl: 3, xxl: 4 }}
 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>
)}
 />