규모가 커지고 파일이 많아지만 css가 뒤죽박죽되어버려 서로에 영향을 끼치게되서 힘들때가있다.
이럴때 예방할수있는 방법이있다.
0. 그냥 클래스명 잘짜기..
1. styled-component사용
스타일드컴포넌트의 장점이라고하면 js이기때문에 랜더링시 html안에 style태그에 주입해준다. css보다 페이지로딩시간이 단축된다.
props값에따라 색상이 변경되는 버튼컴포넌트를 만들어보자.
Nextjs styled-components
그냥 리액트 nextjs와 타입스크립트용 nextjs는 약간다르다. 그냥 리액트 nextjs yarn add styled-components _document.js import React from "react"; import Document, { Html, Head, Main, NextScript } from..
dubaiyu.tistory.com
2. css파일명을 module추가하기
예를들어 footer.css가 있다면 footer.module.css로 변경한다. 이렇게되면 footer.js에서만 영향을 미치게된다.
아래강의에서 css를 임포트하여 잘사용하고있음을 확인할수있다.
https://www.youtube.com/watch?v=W4gWRK-_It8&list=PLZKTXPmaJk8Lx3TqPlcEAzTL8zcpBz7NP&index=2
반응형
'Frontend > css' 카테고리의 다른 글
| image drop-shadow filter (0) | 2022.08.04 |
|---|---|
| absolute 가운데정렬시 다른태그 가려질때 (0) | 2022.05.31 |
| fadein animation, keyframe (0) | 2022.04.28 |
| normalize.css를 react scss 적용 (0) | 2022.03.09 |
| BEM css아키텍처 + scss (0) | 2022.03.06 |
