CSS-in-JS(feat.styled-components)

리액트 전에 순수 자바스크립트만 사용할 때에는
HTML에 CSS 파일을 Link하여 사용하였다.

리액트을 사용하면서 컴포넌트가 많아지면서 CSS을 잘 관리하고자
Module.css 과 styled-components 같은 방법들을 알게 되었고

두 방법 모두 class명이 중복될 수 있는 문제를 방지시켜준다.

그 중 Javascript 파일 혹은 JSX 파일 내에서 CSS를 사용할 수 있게 해주는
CSS-in-JS 을 알아보자.

CSS-in-JS

style을 JavaScript 코드 안에서 작성하는 방식.

컴포넌트 단위로 style을 관리하기 때문에 class명이 겹칠일이 없다.

styled-components는 CSS-in-JS 방식 중의 하나인 라이브러리이다.
특히, React와 함께 많이 사용되며, 템플릿 리터럴을 사용해 style 작성.

설치 방법

1) styled-componenets 설치
npm install styled-components

2) component 파일에 적용
import styled from 'styled-components';

사용 방법

 const 컴포넌트 = styled.HTML태그`
	css 속성: 속성 값;
 `;

예시)
import styled from "styled-components";

const Title = styled.h1`
  background-color: #ededed;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
`;

function Test() {
  return (
    <div>
      <Title>안녕 Styled Components!</Title>
    </div>
  );
}

export default Test;

네스팅

CSS 규칙 안에서 CSS 규칙을 만드는 것

예시)
import styled from "styled-components";
import nailImg from './nail.png';

const Title = styled.h1`
  background-color: #ededed;
  font-size: 16px;
  font-weight: 700;
  
  &:hover {
 	 background-color: #463770;
  }
  
  ${Icon} {
    margin-right: 4px;
  }
  
`;

function Test() {
  return (
    <div>
      <Title>안녕 Styled Components!
      	<Icon src={nailImg} alt="nail icon"/>
      </Title>
    </div>
  );
}

export default Test;

1. &선택자를 통해서 hover를 추가하였다.
2. 컴포넌트 선택자를 통해서 자손 컴퍼넌트 Icon의 css를 추가하였다.

Props 활용

let 컴포넌트 = styled.HTML태그`
    font-size: 25px;
    color: ${ props => props.색상 }
`;

color가 다른 HTML태그를 여러개 만들고 싶을 때 props를 만들어서 개별적용
color가 다른 HTML태그를 여러개 만들고 싶을 때, 개별적용할 속성을 props로 만든다
Ex) <컴포넌트 color="red"> HTML태그 내용 </컴포넌트>