react-router-dom 의 Link에도 적용이 가능하다
방법은 앞과 동일하다.
let 이름=styled(Link)`CSS내용`;
조금 특이하게 적용하는 방법-형제관계인 경우
import로 이미 짜놓은 컴포넌트를 불러오고
let 이름=styled(불러온컴포넌트)`CSS내용`형태로 불러올 수 있다.
여기서 더해서 props 값에 따라 바꾸는 경우가 있다.
let ButtonTest=styled(위에서 따온 이름)`
${(props)=>{
switch(props.mode){
case"경우1": return `바꿀 CSS내용`;
case"경우2": return `다른 바꿀 CSS내용`;}
}}`
와 같이 써서 App.js(react-router-dom의 경우 Home.jsx)에 자기 컴포넌트 안에 mode=경우1 를 넣어주면 값이 바뀐다
이정도로 복잡하게 짜는 경우는 잘 없지만 알아서 나쁠건 없다.
정리해서 보면 styled로 형제에 만든 태그값을 가져온다. 값들 중 바꾸어야 할 게 일부 있는 경우 switch문으로 상위의 해당 컴포넌트의 props 값을 이용해서 바꾸어 주는 방식이다.
SCSS(SASS) : https://sass-lang.com
CSS의 전처리기이다. 즉, SCSS나 SASS로 써도 웹에서는 바로 적용 하지 못하고 CSS로 컴파일 해주는 기능을 설치해서 써야 적용이 된다[당장 배우지는 않음]
npm i sass : 설치
SASS에서도 &로 자기자신을 불러 올 수 있다. [확인 결과 react의 기본적으로 주는 옵션같음]
.color{
color:red;
&:hover{color:blue;}
}
여기에서 &:hover는 .color:hover와 같다
https://sass-lang.com/guide 이 주소에 CSS에서 짜는 방식과 SCSS(SASS)로 짜는 방식을 보여준다.