🔮 Airbnb 숙소 페이지 클론 코딩: CSS-in-JS 사용기

(실제 airbnb 사이트)

요즘 만들고 있는 건 Carousel 만들기! 🤸‍♀️
아무래도 동적인 부분이 다른 컴포넌트보다 많이 요구되는 부분이라 손이 많이 갔다.
React를 접하면서 styled-components 라이브러리를 통해 CSS-in-JS를 사용해오긴 했지만, Carousel을 구현하면서 유용한 팁을 꽤 발견해서 글을 남겨보려한다. 😏

부트스트랩에서 지원하는 carousel을 쓰려했으나 친절한 유튜브 슨생님의 강좌를 보며 직접 구현했다.
👉 https://youtu.be/eywZbJ5PVjg

크게 본 Carousel은 방향키버튼들과 슬라이드들의 랩퍼로 이루어진다.

const Carousel = () => (
  <StyledCarousel className="border">
    <CarouselKeyAnchor className="prev" direction="prev" />
    <CarouselImageWrapper sources={srcArr} />
    <CarouselKeyAnchor className="next" direction="next" />
  </StyledCarousel>
);

중요한 스타일은, 방향버튼은 이미지 위에 놓여야 한다.
따라서 필수속성을 밑과 같이 설정한다.

const StyledCarouselKeyAnchor = styled.a`
  ...
  z-index: 1;
  position: absolute;
  ...
`;

여기까지하면, prev버튼과 next버튼이 겹쳐보일 것이다.
왜냐하면 아직 공통된 속성까지만 줬기 때문에..
이젠 분명히 버튼의 방향에 따라 다른 위치에 두고 싶을 것이다. 🔥
자 이제 이걸 어떻게 구현할 것인가 알아보자.

이때 사용해야 할 것은 props 데이터이다.
내가 본 많은 예시는 속성값이 전달되지 않았을 때 기본 값을 설정을 할 때 사용을 하고있었다.

밑은 styled-component 공식문서에서 제시하고 있는 예시다.

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

좀 더 문서를 찾아본 결과 해답을 얻어 낼 수 있었다.

조건에 따라 속성값만 얻는게 목적이라면 내가 얻고 싶은 값만 반환하면 된다. 위의 예시처럼!

하지만 나는 속성값 뿐만 아니라, 속성도 달리해야하는게 목적이였기에 이런 방법을 사용했다.

const StyledCarouselKeyAnchor = styled.a`
  ...
  ${({ direction }) => {
    if (direction === 'prev') {
      return css`
        left: 5px;
      `;
    }
    return css`
      right: 5px;
    `;
  }}
   ...
`;

큰 차이점은 'css'를 사용했다는 점이다.
사용하려면 styled-component에서 불러오면 된다.

이처럼 공통 속성이 대부분이고 일부 속성만을 달리하고 싶을 때 유용하게 쓰이는 기술이다.

아직은 정적 파트만 구현한 상태이고 동적 파트도 구현할 예정이다 ❗