(CSS-in-JS) styled-components 사용방법, 요약정리
styled-components는 CSS 파일 없이도 JS 파일 내부에서 CSS를 작성할 수 있도록 도와주는 라이브러리이다. 프로젝트를 진행하면서 CSS와 JS파일을 왔다갔다하는 번거로움을 줄여준다고해서 사용해봤다. styled-components를 사용해보면서 느낀 장점은 아래와 같다. 1. styled-components를 사용하면 한 창에서 디자인, 로직 모든것을 해결할 수 있다. 2. CSS 파일을 추가적으로 생성하지 않아도 된다. 3. SCSS 에서 사용하던 문법을 비슷하게 사용할 수 있다. 4. class 명칭을 고민하는 시간이 줄어든다.? 사용법과 간단하게 공부했던 내용을 정리해보려고 한다. 사용방법 import React from " react " ; import { Link } from " react-router-dom " ; import styled from " styled-components " ; import " ./MenuFont.css " ; // styled-components const List = styled . ul ` display : flex ; list-style : none ; ` ; const Item = styled . li ` padding-right : 1 rem ; ` ; const StyledLink = styled ( Link ) ` text-decoration : none ; color : black ; ` ; const CenterMenu = () => { return ( < List className = " Menu-Font " > < Item > < StyledLink to = " / " > Home </ StyledLink > </ Item