React - styled-components

컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생기는데

1. class 만들어 놓은걸 까먹고 중복해서 또 만들거나

2. 갑자기 다른 이상한 컴포넌트에 원하지 않는 스타일이 적용

3. css파일이 너무 길어져서 수정이 어려운경우

그래서 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수도 있는데 

styled-components라는 인기 라이브러리를 설치하여 이용하면됩니다. 

 

설치는 터미널을 열어서 

npm install styled-components 을 입력해주고

 

그리고 사용하고 싶은 컴포넌트 맨위 상단에서 import해옵니다. 

import styled from 'styled-components'

 

styled-components 사용법

이 라이브러리를 이용하면 컴포넌트를 만들 때 스타일을 미리 주입해서 만들 수 있습니다. 

1. <div>를 하나 만들고 싶으면 저렇게 styled.div 라는걸 사용하면됩니다. 

2. 오른쪽에 `` 백틱기호를 이용해서 css스타일을 넣을 수 있습니다.

3. 그럼 그 자리에 컴포넌트를 남겨주는데 변수에 저장하고 씁니다.

import styled from 'styled-components';

let Box = styled.div`
  padding : 20px;
  color : grey
`;
let YellowBtn = styled.button`
  background : yellow;
  color : black;
  padding : 10px;
`;

function Detail(){
  return (
    <div>
      <Box>
        <YellowBtn>버튼임</YellowBtn>
      </Box>
    </div>
  )
}

장점

장점1. css파일 오픈 할 필요없이 js파일에서 바로 스타일 넣을 수 있습니다.

장점2. 여기 적은 스타일이 다른 js파일로 오염되지 않습니다. 원래 그냥 css파일은 오염됩니다.

장점3. 페이지 로딩시간 단축됩니다.(저기적은 스타일은 html페이지의 <style>태그에 넣어줘서 그렇다)

 

실은 일반 css파일도 오염방지 가능합니다.

App.css파일을 만들어서 App.js에서 import해서 쓴다고 해도 

거기적은 클래스명들은 Detail.js까지 사용가능합니다.(오염됨)

프로젝트 사이즈가 커지면 관리하기가 힘들어집니다.

 

그럴땐 styled-components써도 되지만 그냥 css파일에서도 다른 js파일에 간섭하지 않는

'모듈화'기능을 제공하는데 컴포넌트명.module.css 이렇게 css파일을 작명하면 됩니다.

 

 

 

props로 재활용

여러가지 비슷한 UI가 필요한 경우에는 예를들어 지금 노란버튼말고 오렌지색 버튼이 필요하면

props로 해결할 수 있습니다.

${props=>props.bg} 이게 styled-components에서의 props 뚫는 문법입니다. 

bg부분에 자유롭게 작명하면 되고 이제 컴포넌트를 쓸 때 bg라는 props를 입력가능합니다. 

${} : 자바스크립트 문법 {변수명}

import styled from 'styled-components';

let YellowBtn = styled.button`
  background : ${ props => props.bg };
  color : black;
  padding : 10px;
`;

function Detail(){
  return (
    <div>
        <YellowBtn bg="orange">오렌지색 버튼임</YellowBtn>
        <YellowBtn bg="blue">파란색 버튼임</YellowBtn>
    </div>
  )
}

 

 

단점

• JS파일이 매우 복잡해집니다.(이 컴포넌트가 styled인지 아니면 일반컴포넌트인지 구분도 어렵습니다)
• CSS담당하는 디자이너가 있다면 협업시 불편함이존재(그사람이 문법을 모른다면..)