CSS 모듈
부모-자식 관계가 아닌 형제 관계인데도 한쪽의 적용한 CSS가 다른 형제 쪽에도 적용이 된다. 즉, 다른 위치의 CSS여도 같은 이름이 있다면 하나로만 적용된다.
그래서 모듈처럼 css 파일이름을 A.css 가 아닌 A.module.css 처럼 바꾸고 적용할 jsx에도 import styles from 'css위치'로 받아와서 <태그이름 className={styles.class이름}>와 같이 들고 오면 이름이 같아도 서로 각각 들고온다. 여러개를 할 경우 className={`${styles.class이름} ${styles.다른class이름}` 형태로 작성 할 수 있다. 관리자 모드로 style이름을 확인해보면 class 이름 뒤에 임의로 문자가 생겨 있다
https://styled-components.com/ – 위의 경우를 대비한 경우중 하나인 아예 태그를 직접 만들어서 쓰는 방식을 만들어놓은 설치프로그램이다.
npm install styled-components 로 설치를 할 수 있는데 안될 경우 끝에 @latest(최신버전)를 붙인다
형태 : let Title=styled.hi`color:blue` : `(backtice) 안에 스타일 관련 값들을 넣어야 한다.
import {styled} from 'styled-components'로 불러와야 한다.
CSS 부분의 자동완성기능은 없기 때문에 확장에서 vscode-styled-components를 설치해야 한다
값을 받아서 쓰는 경우
let Button=styled.a`color:${props=>props.color}`의 경우 export default function ~({특정매개변수,...rest})에서 값을 받아오는 형태이다. {} 대신 props만 넣어서 props.color 로 해도 되긴 하지만 props 값이 많아질 경우 일일히 넣기에는 너무 많아진다. 위와 같은 식으로 받아왔다면 console.log()에서 확인이 가능하다. 이 때 rest는 앞의 …을 떼고 해야 볼 수 있다. 만든 태그에서 쓸 때는 <Button {...rest}>{children}</Button>처럼 쓰면 된다. children의 경우 App.js에서 해당 컴포넌트 <> 사이에 값이 된다.
위 방법을 통해서 App.js의 컴포넌트에 props 값만이 아닌 onclick 같은 이벤트 또한 넣어줘도 …rest로 인해 들고와지기 때문에 정상적으로 실행이 된다.