Map 함수 이용한 반복 & interface props 정의

React-slick을 이용하여 슬라이더를 만들고 react-avatar를 사용해서 프로필이미지와 이름을 띄우고 인스타그램 스토리처럼 만들고 싶었다. react-avatar를 사용하여 한개의 데이터를 map 함수를 이용하여 화면에 띄우는 것 까진 순조로웠지만 데이터가 여러개 들어왔을 때 반복하는 것에서 막혔다. 분명 map 함수를 사용하는 것은 맞는데 여러가지 삽질을 해봐도 풀리지 않았고 key값을 바꿔가면서 줘봐도 풀리지 않았다.

풀리지 않는 이유가 있었다. 슬라이더를 NewComponent에서 띄우고 프로필 데이터는 LiveBroadCast 에서 정의해줬는데, Profile의 임시데이터를 NewComponent에서 정의해주고 LiveBroadCast에서는 내가 Type을 지정해주지 않아서 풀리지 않았던 것이었다. 앞으로는 interface를 통해 Type을 지정해주는 것을 잊지 말자!

<구현 코드>

• LiveBroadCast.tsx

import Avatar from 'react-avatar';
import styled from 'styled-components';
import NewComponent from './Category/NewComponent';

// interface로 타입지정해주는거 까먹지말기!!!
interface ProfileImage {
  profile: {
    imageUrl: string;
    name: string;
  };
}

const LiveBroadCastWrapper = styled.div `
  /* position: absolute; */
  width: 375px;
  height: 164px;
  margin-top: 9px;
  /* background: #1E1E1E; */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
`;

const InfluencerProfileWrapper = styled.div `
  position: absolute;
  width: 73px;
  height: 110px;
  margin-top: 54px;
  margin-bottom: 11px;
  margin-left: 17px;
`;

const InfluencerImage = styled.div `
  /* display: flex; */
  width: 73px;
  height:73px;
  border: 3px solid #FF8686;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 50%;
`;

const InfluencerName = styled.div `
  position: absolute;
  width: 100px;
  height: 22px;
  margin-top: 4px;
  margin-left: 22px;
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  line-height: 22px;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: -0.0241176em;
  color: #999999;
`;



// <> 안에는 interface로 선언한 Props이름 ({})안에는 Props로 받고자하는 속성 값
const LiveBroadCast: React.FunctionComponent<ProfileImage> = ({profile}) => {
    return (
      <LiveBroadCastWrapper>
        <InfluencerProfileWrapper>
          <InfluencerImage>
            <Avatar alt="Influencer_ProfileImage" src={profile.imageUrl} size="66.5" round={true}/>
          </InfluencerImage>
          <InfluencerName>{profile.name}</InfluencerName>
        </InfluencerProfileWrapper>
      </LiveBroadCastWrapper>
    );

}

export default LiveBroadCast;

• NewComponent.tsx

const profile = [
  {
    imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1f-bdyCIMuT2XOfBqr2KUE24QOAYGK9cBFA&usqp=CAU",
    name: "엘린"
  },
  {
    imageUrl: "https://yt3.ggpht.com/ytc/AAUvwnjRgXQ8cfs4tQ88D_QskjxMQgWS8uFQg4MhxKxW=s900-c-k-c0x00ffffff-no-rj",
    name: "레이디"
  },
  {
    imageUrl: "https://fpost.co.kr/board/data/editor/1902/73f13ad6d5f5126be936fc9035fddf68_1549853437_9992.jpg",
    name: "최겨울"
  },
  {
    imageUrl: "https://static.news.zumst.com/images/108/2019/04/30/6c6b7afa729f4288ac6160b50a7a69e4.jpg",
    name: "세리"
  },
  {
    imageUrl:"https://yt3.ggpht.com/ytc/AAUvwnjydzAF-kQIfLTJ5gLy685dWiw4g0_rRF2Zk8DGrA=s900-c-k-c0x00ffffff-no-rj",
    name: "쩡대"
  },
];

const NewComponent: React.FunctionComponent<ProductState> = ({items}) => {
.
.
.
.
.
.
.

return (
    <>
      <TopCarousel items={productCarouselItem} />
      <Title>라이브방송</Title>
      <Slider {...settings}>

// 여기서 첫 번째 profile은 위에서 정의한 데이터들을 Map 함수로 반복하기 위한 역할
// 두 번째, 세 번째 profile은 LiveBroadCast.tsx에서 정의한 ProfileImage interface의 profile

        {profile.map((profile) => {
             return( 
              <LiveBroadCast profile={profile} />
             )
          })} 
      </Slider>

      <Items>
        {items &&
          items.map((item, i) => {
            return <ProductCard item={item}></ProductCard>;
          })}
      </Items>

      <GridList cols={2}>
        {items.map((item, i) => {
          return(
          <GridListTile>
             <ProductCard item={item}></ProductCard>
          </GridListTile>
          )  
        })}
      </GridList>
    </>
  );
};

export default NewComponent;