[Clone YouTube] Styled-Components

1. 배경

유튜브 클론을 하기 위해 유튜브를 분석하던 중, Styled-Components의 존재에 대해 알게 되었다. CSS in JS가 가능해지는 CSS 프레임워크인데, 그렇지 않아도 코드가 길어지면 일반 CSS로는 가독성이 떨어진다고 생각했었는데 Styled-Components를 리액트와 함께 사용하면 컴포넌트별로 파일을 나눌 때, 한 파일 안에 HTML, CSS, JS가 모두 들어가 있게 되므로 가독성이 한층 좋아질 것 같아 이를 사용하기로 마음먹었다.

사용법을 이해하는데 시간이 걸려서 애를 먹었다.

 

 

2. 구조

먼저 최상단의 header 구조를 만들기로 했다. 컴포넌트 단위로 쪼개서 다음과 같이 폴더를 나누었다.

 

이를 다시 세분화하는 작업을 진행했는데, 가장 먼저 headerBtns를 다음과 같이 나누었다.

이 과정에서 본격적으로 styled-components를 학습하며 작업을 진행하였다.

 

 

3. Styled-Components

import React from "react";
import styled from "styled-components";
import HeaderUserInfo from "./headerUserInfo/HeaderUserInfo";
import HeaderAddVideo from "./headerBtnsAddVideo/HeaderAddVideo";
import HeaderBtnsMenu from "./headerBtnsMenu/HeaderBtnsMenu";
import HeaderBtnsAlarm from "./headerBtnsAlarm/HeaderBtnsAlarm";

// 우측 버튼 배치
const HeaderBtnsWrap = styled.div`
  width: 16%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const HeaderBtns = () => {
  return (
    <HeaderBtnsWrap>
      <HeaderAddVideo />
      <HeaderBtnsMenu />
      <HeaderBtnsAlarm />
      <HeaderUserInfo />
    </HeaderBtnsWrap>
  );
};

export default HeaderBtns;

HeaderBtns의 메인인 HeaderBtns 컴포넌트는 위와 같다. 여기서 styled-component를 처음 사용했다. styled-component는 이름 그대로 스타일이 적용된 컴포넌트이다. 위와 같이 작성하면, width: 16%, height: 80px, display: flex, justify-content: space-between, align-items: center로 스타일된 div 태그를 만들고, 이를 HeaderBtnsWrap라는 태그로 정의한다는 뜻이다. 따라서, HeaderBtnsWrap의 하위 태그들인 HeaderAddVideo, HeaderBtnsMenu, HeaderBtnsAlarm, HeaderUserInfo는 HeaderBtnsWrap의 스타일에 의해 flex 레이아웃으로 배치가 결정된다. HeaderAddVideo, HeaderBtnsMenu, HeaderBtnsAlarm에는 현재 아이콘 태그만이 들어가 있고, HeaderUserInfo는 다음과 같이 정의되어 있다.

 

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

const HeaderUserInfoWrap = styled.div`
  width: calc(36px - 2px);
  height: calc(36px - 4px);
  padding-bottom: 4px;
  padding-right: 2px;
  border-radius: 100%;
  background-color: hsl(17, 18%, 47%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  :hover {
    transform: scale(1.1);
    cursor: pointer;
  }
`;

const HeaderUserInfo = () => {
  return <HeaderUserInfoWrap>Gyu</HeaderUserInfoWrap>;
};

export default HeaderUserInfo;

HeaderBtnsWrap

여기서의 HeaderUserInfoWrap 역시, 해당 스타일이 적용된 div 태그라고 볼 수 있다. 내부에 :hover나 클래스 등의 선택자를 사용하는 것도 가능하다.

.fas {
  width: 40px;
  height: 40px;
  color: hsl(0, 0%, 38%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.fas:hover {
  transform: scale(1.1);
  cursor: pointer;
}

또한 fas 클래스를 가진 아이콘들은 모두 동일한 값을 적용할 것이므로, 이를 포함한 글로벌 값들을 저장하기 위해 css.app 파일을 만들어 App.js에서 import해 주었다.

 

이틀을 사용한 것치고는 초라한 결과지만, 어쨌든 styled-component에 대해 조금은 이해하게 되었다. 이를 사용하면서 본격적으로 GyuTube 제작에 착수해 보려고 한다.