[React, CSS] 반복되는 div형식 나열📃📃📃

: ) YOUNG·2021년 7월 2일

React

목록 보기

6/13

궁금하신 점이나 고칠 부분이 있다면 언제든지 댓글 남겨주세요!

기존의 반복되는 div 나열

프로젝트를 진행하면서 페이지를 만들던중에 진짜 큰 문제가 생겼는데
내가 사진을 넣으면서 CSS효과를 적용해보던중 기존에 있던 코드는 카드형식의
틀을 추가하는게 아니라 그냥 일일이 다 손봐서 CSS styling이 하나의 사진마다 필요하다는 점이었다. CSS공부를 하기전에는 몰랐었는데 처음부터 아예 구조자체가 틀렸던거다
코드 중복문제가 진짜 심각했다.

수정 전 사진 나열 React코드

photo.js

<div className={cn("Festival")}>
      <div className={cn("FScontainer")}>
        <div className={cn("imgContainer01")}>
          <img className={cn("img01")} src={image01} alt={image01} />
          <div className={cn("textContainer01")}>
            <b className={cn("text01")}>멀리 떠나는 드라이브</b>
          </div>
        </div>

        <div className={cn("imgContainer02")}>
          <img className={cn("img02")} src={image02} alt={image02} />
          <div className={cn("textContainer02")}>
            <b className={cn("text02")}>조용한 전시회</b>
          </div>
        </div>
      </div>

      <div className={cn("FScontainer")}>
        <div className={cn("imgContainer01")}>
          <img className={cn("img01")} src={image03} alt={image03} />
          <div className={cn("textContainer01")}>
            <b className={cn("text01")}>낭만의 카약</b>
          </div>
        </div>

        <div className={cn("imgContainer02")}>
          <img className={cn("img02")} src={image04} alt={image04} />
          <div className={cn("textContainer02")}>
            <b className={cn("text02")}>감상의 트래킹</b>
          </div>
        </div> ...이하 지속 반복

위의 코드처럼 계속해서 Container가 반복되도록 만들어놨는데 여기 문제점이
추가되는 사진과 사진위의 텍스트들이 카드형식으로 만들어졌어야 됬는데 그게 아니라는 점이었다.

이게 무슨 문제점이 있냐하면..

이런 식으로 scss의 부분에서 숫자만 바꿔서 코드를 계속 추가시켜줘야된다는
문제점이 생긴다 이러면 정해진 형식 css가 적용되는게 아니라 내가 일일이 손봐줘야된다는 문제 별거 아닌거 같지만 저런 이미지는 계속 추가 될 예정이기때문에 정해진 틀이 있어야되고 내가 추가하면 그 틀에맞춰서 나열되야 된다.

그래서 기존의 js 코드를 하나의 형식으로 통일 하기로 했다.
마치 카드를 나열하는 것처럼 그림이나 텍스트만 바뀌고 틀은 그대로 유지되면서 나열되는 것이다.

수정된 div 틀

수정된 반복되는 div 나열

 <div className={cn("leisure_section")}>
        <div className={cn("leisure_item")}>
          <div
            className={cn("leisure_img")}
            style={{ backgroundImage: `url(${image01})` }}

            <span className={cn("leisure_text")}>멀리가는 드라이브</span>
          </div>
        </div>

        <div className={cn("leisure_item")}>
          <div
            className={cn("leisure_img")}
            style={{ backgroundImage: `url(${image02})` }}

            <span className={cn("leisure_text")}>조용한 전시회</span>
          </div>
        </div>

        <div className={cn("leisure_item")}>
          <div
            className={cn("leisure_img")}
            style={{ backgroundImage: `url(${image03})` }}

            <span className={cn("leisure_text")}>낭만의 카약</span>
          </div>
        </div>

        <div className={cn("leisure_item")}>
          <div
            className={cn("leisure_img")}
            style={{ backgroundImage: `url(${image04})` }}

            <span className={cn("leisure_text")}>감상의 트래킹</span>
          </div>
        </div>
 
이하 반복..

수정된 결과물

위의 코드와 비교해보면 사진을 background 처리로 해서 url 태그로 변환만 해주고 사진에 들어가는 div크기들은 자동으로 나열되기 때문에 background 이미지와 텍스트만 추가해주면 나머지는 하나의 형식 CSS가 모두 정렬해서 2줄씩 나열시켜줄거다. 기존같았으면 사진과 텍스트를 추가하면 또 새로운 CSS코드가 필요했을텐데 문제가 완벽히 해결되었다.

코드의 고치는 김에 CSS도 뜯어 고쳐서 기존의 흑백에서 마우스 오버시 컬러로전환하는 방식이 아닌 마우스 오버시 약간의 회색이 짙어지고 글씨가 나타나는 방식으로 전환했다.