styled-component React 스타일 적용하기 (1)

React에서는 여러 css를 적용할 수 있지만
많은 사이트에서 쓰이고 있는 styled-component

잘 모르는채로 살짝만 써보다가, 이번에 노마드코더 강의를 들으면서 제대로 기초부터 익히게 되었다.

기본설치와 예제 참고

styled-components install

npm i styled-components

creact-react-app이 세팅된 후 styled-component를 install하자.

아, css적용시 자동완성은 vscode-styled-components 확장프로그램 설치하면 굿.

import 하기

import styled from 'styled-components';

1. 기본 스타일 적용

import후에 먼저 Box라는 컴포넌트를 하나 만들어주기

//App.js

import styled from "styled-components"

const Box = styled.div`
 background-color: teal;
 width: 100px;
 height: 100px;
`

function App() {
 return (
   <Box/>
 );
}

export default App;

변수를 생성하고 styled함수를 사용한다. 뒤에 사용할 div태그를 할당한다. 다른 따옴표 안되고 백틱 태그로 지정한 스타일을 감싸준다.

Box컴포넌트를 화면에 렌더링하면

다르게 동작하는것 한가지 자동으로 class명을 생성해준다. 짱!

2. 컴포넌트 설정 변경, 확장

const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`
const Circle = styled(Box)`
  border-radius: 50px;
`

function App() {
  return (
    <>
      <Box bgColor="teal" />
      <Box bgColor="yellow"/>
      <Circle bgColor="tomato" />
    </>
  );
}

props를 보내서 Box컴포넌트를 변경가능한 속성으로 지정이 가능하다.
bgColor를 각각 적용한걸 볼 수 있다.

그리고,
styled(Box) 기존 Box컴포넌트를 괄호안에 넣어서 할당해주면,

이렇게 Circle은 기존 Box 컴포넌트를 상속받아 스타일이 정의되고, Circle에 정의한 border값이 추가로 적용된다.
(물론 클래스명도 자동으로 각각 중복되지않게 생성해줌)

정리하면, props를 보내서 컴포넌트 설정을 변경가능하게 만들수있고,
중복되는 스타일 확장은 styled() 생성자에 기존 컴포넌트를 구성하면 된다.

3. as

컴포넌트의 태그를 변경하고 싶을때(스타일은 같이 변경하고 싶지 않을 때)

const Circle = styled(Box)`
border-radius: 50px;
display: block;
`

function App() {
return (
  <>
    <Box bgColor="teal" />
    <Box bgColor="yellow"/>
    <Circle as="a" bgColor="tomato" />
  </>
);
}

as="a" 따옴표안에 바꿀 태그를 지정해주면 된다. 아래 처럼 a태그로 바뀐 것을 볼 수 있다. 예로 버튼 태그인데 링크를 넣고 싶을 때 a태그로 바꾸고,href="/" 도 넣어주면 된다.
자주 쓰는 방식은 아니라고 한다.

4. 속성 추가 (attrs)

중복되는 것을 간단히.

const Input  = styled.input.attrs({required:true})`
  background-color: tomato;
`
 
function App() {
  return (
    <>
      <Input/>
      <Input/>
      <Input/>
      <Input/>
      <Input/>
    </>
  )

styled.태그 뒤에 attrs를 입력해주고,
({})안에 태그로 전달될 모든속성을 가진 오브젝트를 담을수 있다.

결과, 모두 style 배경색과 required가 할당된 것을 볼 수 있다.