인프런 커뮤니티 질문&답변

david0218님의 프로필 이미지

작성한 질문수

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

프로필 페이지 만들기

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

작성

·

583

0

ㅋ카드가 모양이 제대로 안나옵니다. 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;

답변 6

1

CS공부하는사람님의 프로필 이미지

2022. 02. 21. 15:17

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

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

0

오종해님의 프로필 이미지

2022. 03. 16. 22:24

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

0

오종해님의 프로필 이미지

2022. 03. 16. 22:21

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

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

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

0

오종해님의 프로필 이미지

2022. 03. 16. 22:21

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>
)}
/>

0

최경민님의 프로필 이미지

2022. 01. 08. 14:51

g혹시 해결하셨나요?

이게 맞는 방법인지는 모르겠는데, 포인트마다 전부 값을 주어서야 의도한대로 동작이 되더라구요.

제로초님께서 전체가 24라고 대댓글 남겨주셨는데,
List 의 grid 속성값으로는 포인트마다 몇개를 배열할거냐는 것 같았어요

제가 맞게 한건지는 잘 모르겠네요
혹시 이미 해결하셨다면, 혹은 뒤에 분들이라도 제가 남긴게 틀렸다면 답글 바랍니다ㅠ

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2021. 09. 30. 11:36

md를 6으로 바꿔보세요.

david0218님의 프로필 이미지
david0218
질문자

2021. 09. 30. 14:48

뭔가 더 이상해지네요,,

gutter: 4, xs: 2, md: 3

gutter 기본값이 4이고 xs일땐 2, md일땐 3이라는 뜻인가요? md를 gutter와 똑같이 4로 하니까 모바일 화면으로 바꾸기 직전에 확 작아지는 부분은 없어지네요.

화면 레이아웃이 xs로 바뀐 후에 더 작아져야 팔로워목록의 카드들도 화면에 맞춰지는데

동시에 되도록 하려면 어떻게 해야할까요?

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2021. 09. 30. 15:11

xs, sm, md 등의 숫자를 바꿔보시면 됩니다. 전체(100%)가 24인걸로 알고 있습니다.