🐥 

리액트에서는 여러 방법으로 css를 적용할 수 있다.

기존 css 스타일 적용 시 코드가 많아지면 클래스명이 헷갈리기 시작한다.. 그리고 각각 다른 css파일을 불러와 사용해도 스타일이 겹쳐지거나 제대로 먹히지 않는다. 아주 불편하다. 내가 당했다. 실제로 스타일 적용이 계속 안되어서 30분 넘게 원인을 찾았는데 css 스타일이 겹쳐져 제대로 적용이 되지 않았다.

그리고 어떤 건 클래스네임, 어떤 건 id에 적용, 어떤 건 태그 자체 적용…. 꼬이기 시작한다..!

그래서 내가 개인적으로 선호하는 방식은 styled-components를 적용하는 것이다..!

---

styled-components ?

• CSS in JavaScript로, JavaScript 코드 내에서 CSS코드를 작성할 수 있다.
• 클래스명을 해시값으로 자동으로 만들어주어 스타일이 겹쳐 제대로 작동하지 않는 경우를 방지할 수 있다!
• 자주 사용하거나 기본 스타일은 mixin 기능 적용을 통해 사용할 수 있다.
• ${변수명} , props를 통한 동적 스타일 적용도 가능하다.
  • 삼항연산자와 논리연산자도 사용 가능!

▶️ 설치를 하자.

• npm install styled-components
• VScode 확장 프로그램도 설치! JavaScript에 CSS코드를 작성하다보니 스타일 코드 자동 완성이 안된다. 아래 파일을 설치하면 아주 편하다. 코드 구분하기에도 편하다.

▶️ 사용 방법.

• 기본 형태

  • 변수명을 원하는대로 작성해 준다. 구분하기 편하도록 보통 뒤쪽에 Wrapper, Layout, Box 와 같이 붙여서 사용한다. 어떤 스타일인지 파악하기 쉽도록!

  • 여기서 태그는 실제 html에서 사용할 수 있는 태그여야 한다. (div, p, span 과 같은)

  • 사용할 때는 컴포넌트 사용하듯이 감싸서 사용해준다.

    const 변수명 = styled.태그 `
    스타일속성: 속성 값;
    `;

(1) 컴포넌트 내부에 함께 작성하기

import styled from "styled-components";

const Header = () => {
  return (
      <HeaderLayout>
        <TitleBox>
          여기는 타이틀!
        </TitleBox>
      </HeaderLayout>
  );
};

export default Header;

const HeaderLayout = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0px;
`;

const TitleBox = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4px 8px 12px 16px;
  width: 100%;
  height: 55px;
`;

(2) props로 동적 스타일 적용하기, 조건식 사용하기

• 리액트는 컴포넌트와 props 천국이다. 스타일도 props를 사용해 동적으로 적용할 수 있다.

import styled from "styled-components";

const Header = () => {
  return (
      <div>
        <MyButton width={100}>이건 버튼!</MyButton>
      </div>
  );
};

export default Header;

const MyButton = styled.button`
  background: blue;
  width: ${(props) => props.width}px;
`;

• 이런식의 조건식도 적용 가능하다. isActive 여부에 따라 버튼의 색상이 바뀐다.

import styled from "styled-components";
import { useState } from "react";

const  ActiveButton= () => {
  const [isActive, setIsActive] = useState(false);

  const toggleActive = () => {
    setIsActive(!isActive);
  };

  return (
    <div>
      <Button active={isActive} onClick={toggleActive}>
        버튼
      </Button>
    </div>
  );
};

export default ActiveButton;

const Button = styled.button`
  color: ${({ active }) => (active ? "#fff" : "#98b3b7")};
  background-color: ${({ active }) => (active ? "#007bff" : "#f8f9fa")};
  cursor: pointer;
`;

(3) mixin 기능으로 기본 스타일 지정하고 사용하기

• 여기저기 쓰이는 기본적인 스타일이 있다면 그 때 마다 만드는게 아니라 미리 선언해놓고 사용이 가능하다.
• 아래의 경우 BasicStyle 을 선언해두었고, TableHeader 에서 그 스타일을 가져다 쓰는걸로 보면 된다!
  • 사용 할 때는 ${BasicStyle} 이런식으로 가져와서 사용한다.

const BasicStyle = `
  padding: 20px;
  background: #e4ebf1;
  color: #6e7f8d;
  font-weight: 900;
  text-align: center;
`;

export const TableHeader = styled.th`
  ${BasicStyle}

  @media (max-width: 396px) {
    font-size: smaller;
    padding: 5px;
  }
`;

▶️ 근데 이렇게 사용하니 뭐가 컴포넌트이고 뭐가 스타일적용을 위한 태그인지 구분이 안된다.

S-dot 네이밍 적용하기

• 코드가 길어지다보면 일반 컴포넌트와 스타일컴포넌트의 구분이 되지 않는다. <다 이렇게 가져오니까>
• 그래서 이런 방법도 있다. 스타일컴포넌트를 불러올 때 S 로 불러와서 구분을 시켜주는 것.
  • S. 이 있는 부분이 스타일 컴포넌트이다. 구분하기 편해지긴 한다..! 단점은 파일이 많아져서 결국 또 복잡해진다..

//[스타일을 적용 할 페이지]

//styled-components로 작성한 파일을 S로 불러온다.
import * as S from "../../styles/adminPage/Products.js";

//사용할 때 <S.지정한 변수명> 으로 사용한다. 
//일반 컴포넌트와 스타일컴포넌트의 구분이 편리하다!
function Products() {
  return (
    <>
      <Card>
        <h3>상품 관리</h3>
        <DataTable headers={header} items={DUMMY} />
        <S.ButtonContainer>
          <AdminButtonGrey>선택 상품 삭제하기</AdminButtonGrey>
          <Link to="/admin/products/add">
            <AdminButtonBlack>상품 등록하기</AdminButtonBlack>
          </Link>
        </S.ButtonContainer>
      </Card>
    </>
  );
}

//[styled-components로 작성한 스타일 파일]

import styled from "styled-components";

export const ButtonContainer = styled.div`
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
`;