styled-components

원래 css를 적용하려면 className이나 id 값 설정해놓은다음 css파일 가서 다시 스타일 적용해야되는데

styled-components라는 외부 라이브러리를 이용하게 되면 js파일 안에서 한번에 할 수 있음 

이거 말고도 장점이 있지만 단점도 있긴함

 

사용법

let Button = styled.button`

(여기안에 css를 적용시켜주면됨)`

*이것도 컴포넌트이기 때문에 대문자로 시작해야됨!!

적용하고 return 안에

<Button/>해주면 컴포넌트처럼 적용이 됨

 

장점

css파일 안만들어도됨

특정 파일에서 만든 스타일 컴포넌트들은 다른데서 사용 안됨

- 원래 app.css에서 적용하면 이게 폴더안에 있는 모든 js파일에도 적용이 돼서 태그 잘못걸고 이러면 섞일 수가 있는데 이렇게 해당 페이지에만 적용이 되기 때문에 그럴일이 없음

- 아니면 app.module.css 라고 module을 붙여주면 이 css파일은 app.js파일에만 적용됨 

로딩시간 빨라짐

- css파일이 별도로 있는게 아니고 필요한 css요소만 적용되기 때문에 좀 빠름

 

만약에 비슷한 컴포넌트인데 폰트색만 다르게 쓰고싶다 하면

let Button = styled.button`

color : ${props => props.c}` 해놓고

<Button c='red'/> 해놓으면 버튼의 설정해놓은 다른 css는 다 동일하고 색만 바꿔서 사용가능 // c에 따라 결정된다 라고 생각

중괄호 안에 저런 단순한 거 말고도 if문 같은걸로 이럴 땐 이거해라 아니면 다른거해라 이런 코드도 넣을 수 있음

ex)display: ${(props) => (props.c ? "none" : "block")};

자세하게 쓰면 

styled components는 component의 props를 전달받아 사용할 수 있는데, 이 안에서 선언된 함수는 props를 파라미터로 가지고 실행됨 

<Button c='red'>에서 이 red를 전달받아서 안에서 사용한다는 소리

 

단점)

- js파일이 복잡해짐

- A에서 만든걸 B에서 쓰려면 export import하고 해야되는데 그럼 css보다 복잡해짐

- 협업할때 꼬일 수 있음