TIL57-01 React Styled-components 백그라운드에 이미지 넣기

백그라운드에 이미지 넣기

• 리액트 스타일드 컴포넌트에서 이미지 안에 div 태그나 다른 요소를 넣으려면, background-image CSS 속성을 사용해서 이미지를 배경으로 설정하고, 그 위에 다른 요소를 추가하는 방식을 사용할 수 있습니다.

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

const Container = styled.div`
  background-image: url('your-image-url'); 
  background-size: cover;
  width: 100%;
  height: 100%;
`;

const Content = styled.div`
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 20px;
`;

const ImageWithContent = () => {
  return (
    <Container>
      <Content>
        <h1>Title</h1>
        <p>Description</p>
      </Content>
    </Container>
  );
};

export default ImageWithContent;

• 위의 코드처럼 하면 이미지와 함께 제목과 내용이 있는 컴포넌트를 만들 수 있습니다. Container 컴포넌트는 background-image 속성을 사용해서 이미지를 배경으로 설정하고, Content 컴포넌트는 background-color 속성을 사용해서 투명한 검정색 배경과 흰색 텍스트를 가지는 박스를 만들었습니다.

이렇게 배경 이미지와 함께 다른 요소를 추가하는 방식을 사용하면, 이미지와 함께 다른 내용을 표시할 수 있습니다.

서버에서 여러 이미지를 받아 오는 겨우

• 백그라운드 이미지의 URL을 서버에서 받아와서 스타일드 컴포넌트에서 사용해야 하는 경우에는, 해당 URL을 컴포넌트의 props로 전달받아서 사용할 수 있습니다.

• 예를 들어, ItemsImgContainer 컴포넌트가 backgroundImageUrl props를 받아서 해당 URL을 배경 이미지로 사용하도록 변경해보겠습니다.

const ItemsImgContainer = styled.div`
  height: 180px;
  border-radius: 1rem;
  background-image: ${({ backgroundImageUrl }) =>
      `url(${backgroundImageUrl})`};
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
`;

const ItemsImgTitle = styled.h2`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
`;

const ItemsImgContainerWithText = ({ backgroundImageUrl }) => {
  return (
    <ItemsImgContainer backgroundImageUrl={backgroundImageUrl}>
      <ItemsImgTitle>Title</ItemsImgTitle>
    </ItemsImgContainer>
  );
};

• ItemsImgContainer 컴포넌트에서 background-image 속성을 설정하는 부분을 변경했습니다. backgroundImageUrl props를 전달받아서, 해당 URL을 템플릿 리터럴로 사용하여 url() 함수에 전달하도록 했습니다.

• ItemsImgContainerWithText 컴포넌트에서는 backgroundImageUrl props를 전달하도록 변경하였습니다. 이제 이 컴포넌트를 사용할 때, backgroundImageUrl props를 서버에서 받아오도록 설정하면 됩니다.