[React] Styled component 이미지 처리(map함수 사용)

Styled components에서 img태그를 사용하려니 src의 위치를 어디에 잡아야할지 고민 중일 때에는

위의 빨간 박스처럼 src를 넣어보자.

카드형태 스타일

import styled from "styled-components";

const ConWrap = styled.div`
  width: 400px;
  border: 5px solid black;
  margin: 100px auto;
`;

const Bg = styled.img`
  width: 100%;
`;

const TitleWrap = styled.div`
  padding: 25px;
`;

const Title = styled.h3`
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 20px;
`;

const Desc = styled.p`
  line-height: 22px;
`;

export const TCStyle = () => {
  return (
    <ConWrap>
      <Bg src="http://cdn.pixabay.com/photo/2022/10/16/13/17/road-7525092_1280.jpg"></Bg>
      <TitleWrap>
        <Title>Title</Title>
        <Desc>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam
          architecto eos, beatae maiores consectetur voluptate maxime iure sint
          omnis excepturi, labore repellat quae voluptatibus reiciendis
          veritatis officia error? Qui, quae?
        </Desc>
      </TitleWrap>
    </ConWrap>
  );
};

백그라운드 이미지 props 처리

우선은 props 안쪽으로 경로를 넣어 전달해줄 준비

위의 경우는 bgUrl이라는 이름으로 사용!

백그라운드의 url 경로가 들어가야하는 부분에 props를 사용하여 넣어준다.

그렇게 하면 둘 다 각자 다른 이미지를 넣어줄 수 있다

배열과 map함수 사용

코드가 길어질 수록 주소를 본 코드에다 써넣으면 복잡하고 혼잡해보이기 때문에 주소만 따로 빼내어 배열을 만들어 넣어주려고 한다.
이때, 어차피 title이나 desc의 내용도 다 다르니 conArr이라는 이름으로 배열에 함께 넣어주었다.

이제 아래 코드로 돌아가 배열을 이용해보자

당연하게도 결과는 잘 나온다.
하지만, 이렇게 하나하나 배열의 요소를 적다보면 너무 비효율적이기 때문에 map함수를 이용해보자면 아래와 같다.

중괄호 안쪽으로 배열명.map(매개변수명 => )을 작성하고, 화살표 뒷쪽으로 만들고자하는 내용을 적어주면 된다.

그리고 map함수를 사용할 때에는 key값을 지정해줘야 하기 때문에 map함수를 열었을 때 가장 첫 번째에 있는 요소에게 key값을 지정해준다.

key값에는 유니크한 고유의 값을 넣어줘야하기 때문에 배열에서 id라고 설정해둔 값을 넣어줬다.

이렇게 map함수와 배열을 사용하면 내용이 늘어나도 배열 부분만 살펴보면 되기 때문에 문제를 찾기가 편해진다.

아래는 배열의 값만 추가해주었다.

그러고 저장을 해보면,

따로 코드를 손볼 필요 없이 잘 추가가 되어있음을 확인할 수 있다.