8. 스박사님을 아세욧?

스박사님은 스타일드컴포넌트를 말합니다~

왜 박사냐고요? 그냥요~~

 

 

스타일드 컴포넌트가 뭐냐?

CSS를 React에 그대로 적용하는게 살짝 불편합니다.

이 불편함을 해결하기 위해 새로운 기술들이 등장 했는데, 그중에서도 가장 인기 있는 기술이 바로

스 타 일 드 컴 포 넌 트 다 이말이야!

 

그럼 어떻게 쓰느냐?

import styled from 'styled-components';

const Button = styled.button`
  background-color: #ededed;
  border: none;
  border-radius: 8px;
`;

function App() {
  return (
    <div>
      <h1>Styled Components!</h1>
      <Button>확인</Button>
    </div>
  );
}

export default App;

//출처 코드잇 강의

이렇게 JSX 문법 속에 css 옵션을 꼽아넣은게 바로 스타일드 컴포넌트입니다.

컴포넌트를 만들 듯 CSS를 아주 리액트스럽게 쓰는 것입니다.

 

기존의 css는 재사용성, 클래스의 중복(전역관리)와 같은 문제가 있는데

 

스타일드 컴포넌트의 경우

css 코드로 바로 컴포넌트를 만들고, js 변수를 만들어 재사용하기 때문에 이러한 문제를 훌륭히 해결해준다는 것!

 

 

그러나 복잡한 페이지에서는 좀 로딩이 느려질 수 있고, 따로 라이브러리를 사용하는 것이기에 전체 프로젝트의 용량도 조금 커집니다~ 그렇지만 저는 큰 규모로 개발하지 않으니까요~

 

이 스타일드 컴포넌트의 핵심 문법도 알려드릴게요.

1. 네스팅

nesting은 규칙 속의 규칙을 만드는 것을 말합니다.

 

import styled from 'styled-components';

const Button = styled.button`
  background-color: #6750a4;
  border: none;
  color: #ffffff;
  padding: 16px;

  &:hover,
  &:active {
    background-color: #463770;
  }
`;

export default Button;

 

네스팅에서 &는 부모 선택자를 의미하는데, &을 활용해서 호버하거나 액티브되었을 때의 추가 동작을 설정하는 것입니다.

 

또한 컴포넌트 안의 다른 컴포넌트도 선택할 수 있는데,

import styled from 'styled-components';
import nailImg from './nail.png';

const Icon = styled.img`
  width: 16px;
  height: 16px;
`;

const StyledButton = styled.button`
  background-color: #6750a4;
  border: none;
  color: #ffffff;
  padding: 16px;

  & ${Icon} {
    margin-right: 4px;
  }

  &:hover,
  &:active {
    background-color: #463770;
  }
`;

function Button({ children, ...buttonProps }) {
  return (
    <StyledButton {...buttonProps}>
      <Icon src={nailImg} alt="nail icon" />
      {children}
    </StyledButton>
  );
}

export default Button;

이렇게 수정하고싶은 컴포넌트 자체를 템플릿 리터럴 안에 넣어주면 됩니다.