• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    해결됨

2-7. 컴포넌트 분리하기 강의 듣고 2가지 질문

19.09.19 01:58 작성 조회수 86

0

const PostCard = ({post}) => {

	return (
		<Card
			key={+post.createdAt}
			cover={post.img && <img alt="example" src={post.img}></img>}
			actions={[
				<Icon type="retweet" key="retweet"></Icon>,
				<Icon type="heart" key="heart"></Icon>,
				<Icon type="message" key="message"></Icon>,
				<Icon type="ellipsis" key="ellipsis"></Icon>
			]}>
			<Card.Meta
				avatar={<Avatar>{post.user.nickname[0]}</Avatar>}
				title={post.user.nickname}
				description={post.content}
			/>
		</Card>
	);
};

1. key 속성에 '+'를 붙이셨는데 이런 경우는 처음 보는거라 무슨 의미이고 왜 사용하는것인지 궁금합니다.

2. index.js를 보면 PostCard 컴포넌트 post props에 들어가는게 객체인데, PostCard 함수 매개변수에서 왜 또 post에 중괄호를 씌워주는지 궁금합니다.

답변 1

답변을 작성해보세요.

1

1. createdAt은 기본적으로 날짜 객체입니다. 객체를 key에 넣으면 오류가 발생하기 때문에 +를 붙여 숫자로 형변환합니다.

2. 매개변수는 props자리입니다. props.post로 쓰고싶지 않다면 매개변수 자리에 { post }로 구조분해 해야 합니다.