[29SEP, 2021] TIL

TIL은 쓸 때마다 오랜만인 것 같다..🤭 가끔씩이라도 꼭 쓰려고 노력해야겠다..!

 

---

 

✔️ SCSS 파일 분할

그동안 CSS Module을 사용해서 해당 클래스 이름들이 고유하게 만들어 사용했는데 다른 방법도 있지 않을까 하고 찾아보다 @import해주는 방법도 알게 되었다. CSS Module은 scss파일 확장자를. module.scss로 해주고 스타일을 줄 해당 컴포넌트에서 import styles from"./이름.module.css";  import를 해주면 되었다. 

@import 방법은 스타일 파일 이름 앞에 _를 붙여(_button.scss와 같이) @import로 가져오면 된다. 그래서 나는 다른 파일들을 App.scss에 @import해주었고 스타일이 모두 잘 적용되었다. 이 방법은 className을 설정할 때 styles를 다 임포트 해주지 않아도 되는 점이 편하지만, 같은 클래스 네임이면 안되어서 네이밍에 신경 써야 한다. 각각의 장점이 있는 것 같다. 

 

 

 

✔️ 커스텀 훅

useToggle이라는 훅을 만들어 사용해보았다.  토글을 사용하려다 많이 쓰이기도 하고 얼마 전 유튜브에서 이렇게 커스텀 훅을 만들어 사용한 것을 보아서 만들어보았다. 반복적으로 사용되는 것은 확실히 커스텀 훅을 만들어 사용하면 편하다. 하지만 난 왜 이리 아직 커스텀 훅을 만드는 게 어려울까..?! 하면서 늘거라 믿으며..!