[React JS] styled-components (1)

styled-components 이전에 사용했던 방법은 js파일당 그에 해당하는 css 모듈을 만드는 것이다.

예를 들면 Button.js 와 그것을 꾸미는 Button.module.css파일을 만든다.

Button.js

function Button({ text }) {
  return (
    <div>
      <button style={styles}>{text}</button>
    </div>
  );
}

Button.module.css

button {
  background-color: tomato;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  margin: 10px;
}

css module은 className을 랜덤하게 만들어서 클래스 명을 만드는데 낭비하는 시간을 줄여주고, 다른 css에서 같은 이름의 클래스에 대한 설정이 존재해도 파일명에 맞는 component에만 css가 적용된다.

이번에 배운 styled-components 라이브러리는
css를 더 효율적으로 사용하도록 한다.다크모드, 라이크 모드 변환할때 좋다는데 아직 거기까지 안가봄

import styled from 'styled-components';
//다른 라이브러리와 마찬가지로 사용하기에 앞서 import해준다.

//html파일에서 무한반복의 태그들로 틀을 만들어주는 기존의 방법과 달리
//컴포넌트 단위로 태그를 미리 만들고 백틱(`)으로 css 설정을 작성한다.
const Father = styled.div`
  display: flex;
`;

//prop설정 bgColor를 받아온다. 
const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

//styled()를 함수처럼 사용해서 Box의 css설정을 받아올 수 있다.
const Circle = styled(Box)`
  border-radius: 50px;
`;

function App() {
  return (
    <Father>
    //bgColor 라는 임의의 prop을 만들어서 같은 컴포넌트에서도 속성변경이 가능함
      <Box bgColor="teal" />
      <Box bgColor="tomato" />
      <Circle bgColor="violet" />
    </Father>
  );
}

https://styled-components.com/