[React] scss안에서 다른 scss파일 부르기, scss @mixin , 변수 이용

난진짜 이런게 있는지 몰랐지... 😭

보충수업을 듣다가 알게된 scss 관련 몇가지 지식들 끄적여 보겠다 !

 

 

 

 

 

 

* scss 안에서 다른 scss 파일 불러오기

@import "경로";

 

 

 

 

 

 

 

* className에서 {``} 을 쓰면 함수 넣기 가능 !!!

 

 

진짜 이건 몰랐다... 내가 구현해야 했던 것이 

색상 버튼을 누를 때 마다 그 색상으로 색이 변경되고, text가 같이 변경되는 것을 구현해야 했다. 

 

 

 

일반적으로 className은 "" 문자열이지만

<className ="introduce test"> 이러한 구문의 test 가 아닌 blue 등 다른 변수가 오면서 동적으로 변해야 할때 

`` (백틱) => 문자열에서 자바스크립트 혹은 변수를 사용할때 사용 할 수 있다고 멘토님이 알려주셨다. 

 

 

 

 

일단 useState를 이용해 색상을 변경하는 것은 알겠으나 className="selected"에 어떻게 scss 파일에 변경된 state 값을 넣을 수 있을지가 의문 이었는데, ``을 사용해 보기러 했다.

 

 

 

주어진 scss파일이다. 

 

<div className= " selected">에 selected 뒤에 white나 red  혹은 yellow가 와야 하는 상황.

이 세 변수들이 해당색을 가지는 <button/> 을 누를때마다 색상이 바뀐 state 인 color 가 들어가야 하기 때문에

 

${color}를 자바스크립트 형태인 { } 안에 ``을 넣어주고 그 안에 selected ${color}를 넣어주었다. 

 



 

 

 

 

저렇게 해주니 useState로 변경된 값이 저장된 color값이 버튼을 누를 때 마다 실행되었다. 

 

넘나감격...새로운것을 배웠다... ㅎ_ ㅎ