처음 배운 것

const isProfileCard = () => {
  return profiles
    .filter((profile) => profile.role !== "부회장") //부회장은 걸러라//
    .sort((a, b) => a.age - b.age)
    .map((profile) => <ProfileCard {...profile} key={profile.id} />);
};

 

.map함수는 profiles라는 배열의 각 요소마다 적용되는 함수

 

...profile은 배열의 요소== 객체로 넘기는게 아니라 객체의 각 요소를 하나씩 넘겨줌으로써 얕은 복사를 막을 수 있다.

 

각 요소를 보내면

export default function ProfileCard({
  name,
  age,
  role,
  univ,
  major,
  phoneNum,
  email,
  githubLink,
  imageUrl,
}) {
  return (
    <Wrapper>
      <InfoBox>
        <InfoMain>
          <MainTop>
            <Name_Age>
              {name} ({age}){" "}
            </Name_Age>

            <Role>{role}</Role>

            <Univ_Major>
              {univ}대학교 {major}과
            </Univ_Major>
          </MainTop>

          <MainBottom>
            <PhoneNum>{phoneNum}</PhoneNum>

            <Email> {email}</Email>

            <GitLink href={githubLink}>{githubLink}</GitLink>
          </MainBottom>
        </InfoMain>

        <Image src={imageUrl} width="100%"></Image>
      </InfoBox>

      <InfoBottom> 신촌 연합 IT 창업 동아리 CEOS</InfoBottom>
    </Wrapper>
  );
}

 

요놈이 하나씩 매개변수로 받아서 태그 return을 어떻게 할 지 결정하는데,

{name}이 원래는 props.info.name 요렇게 썼는데 하나씩 요소를 보내주니까

그냥 name으로 바로 써버리는게 가능하다.

 

https://kevinyckim33.medium.com/jsx-spread-operator-component-props-meaning-3c9bcadd2493

JSX Spread Operator <Component {…props} /> Meaning