React - styled components

styled-components라는 새로운 css 스타일링 방법

먼저 설치법 : 터미널에

npm install styled-components

입력해서 설치 후 사용하고자 하는 js파일 맨위에

import styled from 'styled-components';

stlyed-components의 사용법

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

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

이런 식으로 js파일의 상단에 YellowBtn 이란 변수에 스타일을 담은 태그를 작성해서 원하는 위치에 컴포넌트처럼 작성할 수 있다.

styled-components의 장점

1. css파일을 열지 않아도 js파일에 바로 스타일을 넣을 수 있다

위 코드 처럼 같은 js파일에 css파일 없이 스타일을 추가할 수 있음

2. 다른 js파일로 스타일이 오염(적용)되지 않는다

3. 페이지 로딩시간이 단축된다

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
추가적으로 이후 비슷한 UI가 필요한 경우 props문법을 사용해서 변형시킬 수 있다

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

아까 작성한 YellowBtn에서 background부분을 props로 뚫어주고

<YellowBtn bg="blue">버튼</YellowBtn>
<YellowBtn bg="yellow">버튼</YellowBtn>

이와 같이 태그를 사용하는 곳에 props문법처럼 bg='blue'와 같은 속성을 줘서 비슷한 UI를 조금씩 바꿔 재사용할 수 있다

그리고 YellowBtn과 똑같은 속성에서 추가적인 속성을 필요로 할때 복사하는게 아닌 다른 방법이 있다.

let YellowBtn2 = styled(YellowBtn)`
	margin : 10px;
`

이런 식으로 YellowBtn과 같은 속성에 추가를 하고 싶을 때 괄호를 통해 복사할 수 있다

출처 : https://codingapple.com/