TIL- 스타일 컴포넌트props.

map을 돌리고 있는 컴포넌트들에게 각 다른 배경색을 주고 싶었다.

이거 분명 될 것 같은데.... 스타일 컴포넌트에 style

응 당연히 되지

우리가 쓰는거 스타일'컴포넌트' -> props가능. ssap가능.

 {MAIN_IMAGE_DATA.map(data => {
          return (
            <div className="SliderForm" key={data.id}>
              <SliderBackground color={data.bg}>
                <SliderImg src={data.img} alt="sskd" />// <- 여기
                <SliderString>
                  <p className="desc">{data.desc}</p>
                  <p className="subDesc">{data.subDesc}</p>
                </SliderString>
              </SliderBackground>

이렇게 주고,

const SliderBackground = styled.div`
  display: flex;
  height: 400px;
  background-color: ${props => props.color};
`;

이렇게...props준다...
그리고 map돌고 있는 데이터에 각 색을 주면된ㄷ...

누군가는 당연하게 했을 것 같긴한데.. 난 너무 신기하고 기쁘고 행복했다.. 그래서 남길꺼!!!!