[React] styled-compoents

 

 

 

 

 

 

 

styled-components  공식페이지에 가면 위와 같이 써져있습니다.

ES6 및 css의 장점을 사용하여 스트레스 없이 앱 스타일을 지정하라고 말입니다. 

 

사실 JS를 사용하며 css도 같이 다루기가 무척 불편합니다. 

같은 파일안에 넣으면 지저분하니 따로 css 파일을 만들면 하나하나 id와 class 이름이 겹치는지 확인해야하고 조금 더 복잡한 화면은 구현하기가 힘들어진다든지  이외에도 많은 불편함들이 있지만 이러한 불편함을 styled-components가 해결해줍니다.

 

 

그렇다면 styled-components가 무엇인지 알아봅시다.

 

 

일단은 백문의 불여일견이니 다른소리 다 집어치우고 바로 테스트를 시작해봅시다. 

 

1. 기본 문법

 

우리의 목표는 아래와 같은 버튼을 만드는 것 입니다. 

1) 설치하기

( 사용할 준비 끝이다 styled-components는 빌드 단계가 필요없다)

 

 

2)  설치한 라이브러리 사용할 컴포넌트에 가져오기

3)  코드 작성하기 

유의점 3가지 

• 1. 컴포넌트 이름은 대문자로 시작하기
  • 왜냐하면 소문자로 하면 html 태그로 인식하기 때문입니다. 
  • 대문자로 작성해야 하나의 컴포넌트로 인식해서 정상적으로 동작합니다.
  • 이름으 원하는 대로 작성가능합니다. Button 말고 Banana도 가능 
• 2. styled 뒤에 사용해야할 HTML 태그명 입력하기
  • styled.button 으로 입력하면 html 태그중에 button을 가리키는 것이고  styled.div로 입력하면 div 태그를 나타냅니다.
• 3.  백틱(``)으로 감싸고난 뒤 그 안에 css를 작성하기 

 

4) 완성

---

 

2. 더 알아보기

 

1) 속성 추가

가정을 해봅시다. 

우리가 페이지를 만드는데  좋아하는 과자, 계절, 운동, 색상을 각각 3개의 똑같은 스타일의 input에 받고자하는데 전부다 required가 필요합니다.

그렇다면 아래처럼 하나하나 required를 해줘야할까요? ?

아니다 이 또한 간편하게 하는 방법이 존재합니다.

바로 attrs 를 사용하면 됩니다.

이런식으로 작성하여도 동일하게 적용이됩니다.

여기서 동적으로 속성을 추가해 주고 싶다면 아래처럼 해주면 됩니다. 

 

---

 

2) 동적으로 속성 및 스타일 추가 

더 나아가서 만약 동적인 요소를 추가하고 싶다면 아래처럼 하면 됩니다. 

1. type  = "text" 를 전부 입력하지 않아도 됩니다. 

2. placeholder 속성을 전부 쓸 필요 없습니다.  또한 반복되는 "좋아하는" 계속 입력할 필요가 없습니다. 

3. input에 따라 색깔을 다르게 설정할 수 있습니다. 

4. input에 따라 크기도 다르게 할 수 있습니다. 

이 외에도 여러가지시도를 해볼 수 있습니다.  

 

---

3) 확장

자바스크립트에서 클래스를 만들 때 중복된 코드를 효과적으로 줄이거나 확장하고 싶을 때 상속이 있듯이 비슷하게 styled-components에 확장이라는 것이 있습니다. 

 

이런식으로 우리가 기본 버튼을 만들고 전체적인 틀과 스타일은 유지하지만 색깔만 토마토 색깔로 바꾸고 싶을때 어떻게 할까? 

컴포넌트 이름을 다르게 해서 똑같이 복사 붙여넣기 한 뒤 색깔만 바꿀 수 있지만 더 쉬운 방법이 있다. 

바로 확장을 사용하면 된다. 

방법은 정말 쉽다. 

예를 들어 토마토 버튼 컴포넌트 이름을 TomatoButton이라고 한다면

const TomatoButton = styled(Button)``

이렇게 해주고 백틱 사이에 추가해주고 싶은 스타일을 입력하면된다. 

단순히 styled( 확장 하고 싶은 컴포넌트 명) 를 사용해주면 된다. 

바나나 컴포넌트에서 더 스타일을 확장하고 싶다면     = styled(Banana)`` 로 해주고  백틱 사이에 스타일을 추가해주면 된다.

여기서 더 나아가서  다른 서드파티 컴포넌트에도 확장을 적용해볼 수 있다. 

예를들어 잘사용하는 react-router-dom의  <Link> 에도 사용히 가능하다. 

const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);

const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`;

render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
);

 

---

 

4) as 속성

styled-components를 잘 사용하다가 특정 컴포넌트만 속성을 바꾸고 싶을 때가 있을 것 입니다. 

예를 들어서 버튼을 여러개 만들었는데 한 개는 스타일을 그대로 유지한채로 div로 만들고 싶을때 말입니다. 

그럴때 사용할 수 있는 것이  as  입니다.

 

이렇게 butto이 div로 변경되는 것을 볼 수 있습니다.

 

---

 

5) single ampersand (&)

single ampersand는 &를 지칭하는 용어입니다.   즉 단일 앰퍼샌드라고 부릅니다. 

styled-components에서의 단일 앰퍼샌드는 컴포넌트의 모든 인스턴스를 가리킵니다. 

이것은 광범위한 overrides에 사용됩니다. 

 

예제를 먼저 보겠습니다. 

const Thing = styled.div`
  color: blue;

  &:hover {
    color: red;
  }
`;

function App() {
  return (
      <Thing>Hello world!</Thing>
  );
}

이렇게 하면 마우스를 올리면 파란색으로 변할 겁니다.

즉 컴포넌트 태그에다가 hover를 작성하거나 attrs를 사용할 필요없이  단일 앰퍼샌드(&)를 사용하면 간단하게 구현할 수 있습니다.

 

또 다른 예제를 보겠습니다.

만일 위와 같은 코드일 때 안녕하세요만  hover이 적용되도록 할려면 어떻게 해야할까요?

스타일을 그대로 두면  h1과 span 모두 즉 Thing 태그 전체에 hover이 적용됩니다.

 

span만 hover을 적용시키고 싶다면 아래와 같이 하면 됩니다.

단일 앰퍼샌드(&)를 사용안하면 아래처럼 하면 됩니다.

 

 

여기서 조금 더 알아보겠습니다. 

단일 앰퍼샌드(&)의 여러가지 활용예 입니다.

 

자 뭔가 어려워 보이지만 하나씩 차근차근 알아보겠습니다. 

 

 

(1) & ~ &

 맨처음 <Thing> 태그를 제외하고 모든 <Thing>태그를 가리킵니다. (단, 자식에 있는 <Thing> 태그 제외 - 다섯째 ) ( 중간에 div 태그가 껴있어도 건너뛰고 전부 적용)     ( 둘째 ~ 넷째 )

 

 

(2) & + &

맨 처음 <Thtin> 태그를 제외하고 다음 <Thing>태그가 있는 곳 까지를 가리킵니다. 즉 중간에 div 태그가 껴있다면 그 전에있는 <Thing>태그까지만 적용됩니다.  (둘째, 셋째)

 

 

(3) &.클래스명 

해당 클래스명을 가진 <Thing> 태그만 가리킵니다. (셋째)

  

(4) .클래스명 &

해당 클래스명 안에 <Thing> 태그를 가리킵니다. (다섯째)

 

(5) &&  더블 앰퍼샌드

위의 각각의 경우에 더블 앰퍼샌드를 사용하면 충돌하는 스타일이 있을지라도 &&로 지정된 것이 우선순위를 갖게 됩니다. 

 

 

 

6) 애니메이션

7) Themes

 

추후 업데이트

 

 

 

 

 

---

 

source

 

styled-components 작동원리가 궁금하다면? 링크

https://styled-components.com/docs/basics#extending-styles