styled-components

어떤 컴포넌트에서 css파일을 import를 하면 그 컴포넌트에서만 스타일이 적용될 것 같지만 그렇지 않다. 다른 컴포넌트에서 같은 이름의 클래스를 갖고 있다면 스타일은 그것을 대상으로 영향을 또 미친다. 

즉, css파일을 import해서 사용하면 전체 페이지에 있는 모든 요소가 영향을 받는다. 

 

그래서 styled-components를 사용하면 특정 스타일이 첨부된 컴포넌트를 구축할 수 있고, 다른 컴포넌트에는 전혀 영향을 미치지 않게 만들 수 있다.

 

설치

npm install --save styled-components

 

사용

import styled from 'styled-components';

const Button = styled.button``;

styled.button``; 이 문법은 tagged template literals라고 부른다. 

styled는 styled-components 에서 import하는 객체이고,  styled객체의 button 메서드에 접근할 수 있다. 

 

button() 이렇게 괄호를 사용해서 호출하는 것이 아닌, 백틱을 붙인다. 이것은 뒷단에서 메서드로 실행될 것이고, 백틱안에 전달하는 것은 이 메서드로 전달된다.

 

그러면 button 메서드가 새로운 버튼 컴포넌트를 반환한다. 

 

const Button = styled.button`
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;

  &:focus {
    outline: none;
  }

  &:hover,
  &:active {
    background: #ac0e77;
    border-color: #ac0e77;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
  }
`;

이런식으로 백틱안에 스타일을 작성하면 된다.  "&" 기호를 사용하면 생성된 컴포넌트를 다시 참조할 수 있다.

이렇게 생성한 Button 컴포넌트를 확인해보면 styled-components에 의해 동적으로 생성된 클래스 이름을 확인할 수 있다.

모든 styled components마다 고유한 클래스 이름을 갖기 때문에 앱에 있는 다른 컴포넌트에는 절대 영향을 주지 않는다.

 

props

styled component에 props를 추가해서 백틱 안에서 그 props를 사용할 수 있다. 

 color: ${(props) => (props.invalid ? 'red' : 'black')};

백틱 안에서 $와 중괄호를 사용해 안에 화살표 함수를 전달한다. 이 함수는 매개변수로 props를 받고, 정확하게 텍스트를 반환해야 한다. 

이 함수는 styled components 패키지에 의해 호출되는데 컴포넌트가 가져오는 모든 props을 가져온다.