[React] 배경 이미지 위에 텍스트 배치하기 (Styled Components 사용하여 map을 통해 props를 넘겨주는 방법)

Slick을 사용하여 환경이슈 컴포넌트 완성을 하고, 뒤이어 구현할 산 추천 컴포넌트는 비슷하니까 스타일이랑 내용물만 살짝 바꿔주면 금방 하겠다 싶었는데, 이미지 넣어주고 산 추천 관련한 더미데이터 추가해서 내용물 넣어주니까 이상하게 슬라이더 안에 이미지만 보이고 텍스트가 하나도 안보였었다.

개발자 도구 켜서 요소들을 확인해보니 텍스트들이 모두 이미지 밑으로 들어갔다는 사실을 알게 되었고, 생각해보니 이미지 넣고 텍스트 넣고 할게 아니라 이미지 위에 텍스트를 넣어야했음을 깨달았다.

그래서 그냥 아예 div 안에 이미지를 넣지 말고, div 배경을 이미지로 깔고 그 안에 텍스트를 넣어서 글씨가 배경 이미지 위에 오도록 하였다.

 

 

 

 

먼저, 배경으로 쓸 이미지 데이터를 map을 사용하여 props로 받아올 것이기 때문에 다음과 같이 div에 props 받아오는 부분을 작성해준다.

 

RecommendItem.js

return (
    <Wrap>
      {/* ... */}
      <Slider ref={slickRef} {...settings}>
        {Dummy.recommends.map((recommend) => (
          <Item key={recommend.id} thumbnail={recommend.img}>	// Item div에 props로 배경으로 깔아줄 이미지 불러오기
            <Course>{recommend.course}</Course>
            <Address>{recommend.address}</Address>
            <Detail>
              <div>
                <p>{recommend.level}</p>
              </div>
              <div>
                <p>{recommend.time}</p>
              </div>
            </Detail>
          </Item>
        ))}
      </Slider>
      {/* ... */}
    </Wrap>
  );

 

 

그리고 해당 컴포넌트의 스타일에서 배경에 이미지를 삽입하는 코드를 추가해주면 되는데, background-image를 사용하면 된다. css에 background-image라는 속성이 있는데, 배경에 이미지를 넣고 싶을 때 사용하는 속성이다.

const Item = styled.div`
  width: 248px !important;
  height: 316px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-radius: 20px;
  border: 1px solid #c4c4c4;
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%),
    url(${(props) => props.thumbnail});		// background-image 속성을 사용하여 props를 내려주기
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
`;

 

 

 

여기까지 해서 배경 이미지 위에 텍스트 배치하기를 성공한 모습이다.

 

 

 

 

이 아래로는 Styled Components를 사용하여 map을 통해 props를 넘겨주는 과정을 일반화하여 정리해보았다.

 

 

 

const data = [
  { id: 1, color: 'red' },
  { id: 2, color: 'blue' },
  { id: 3, color: 'green' },
];

다음과 같은 데이터가 있다고 하자.

 

 

import styled from 'styled-components';

const StyledBox = styled.div`
  width: 50px;
  height: 50px;
  background-color: ${props => props.bgColor};
  margin: 5px;
`;

bgColor prop을 사용하여 background-color를 설정하면 된다.

이제 data 배열을 map()을 사용하여 각 아이템에 대한 컴포넌트를 생성하고, bgColor prop에 해당 아이템의 'color' 속성값을 넘겨주면 된다.

 

 

import React from 'react';
import styled from 'styled-components';

// StyledBox 정의 부분

const App = () => {
  return (
    <div>
      {data.map(item => (
        <StyledBox key={item.id} bgColor={item.color} />
      ))}
    </div>
  );
};

export default App;

data.map()을 사용하여 각 데이터 항목에 해당하는 StyledBox 컴포넌트를 생성하고 bgColor prop에 item.color 값을 전달한다. 이렇게 하면 각 StyledBox의 배경 색상은 데이터 항목의 color 값에 따라 결정된다.