React에서 styled-component를 활용해서 실습 프로젝트를 만들어보았다. 만드는 과정에서 styled-component의 컴포넌트화로 재사용성이 높고 구분된 코드를 작성하고 리스트에 마진을 주는 테크닉이나 구분선을 만드는 테크닉, margin-OOO: auto를 잘 활용하는 법 등 많은 팁을 배웠다.
연습을 많이해야할 뿐이지 어렵진 않다.
현업에서는 CSS Module과 styled-component중 어느것을 더 많이 사용할까?
그리고 친구는 tail-wind같은 CSS Framework를 많이 추천하는데, 이는 커스터마이징이 힘들다고 한다. 그런데 현업에서는 많이 쓰는것 같은데 커스텀 디자인을 별로 신경쓰지 않는 회사인걸까?
처음 react에 styling을 적용하는 수업을 했을때는 너무 복잡하고 어려웠는데 오늘 실습에서 천천히 적용해보니 재미있고 체계적으로 스타일링을 할 수 있어 좋았다. 기존에 내가 만들었던 프로젝트는 생 CSS만을 사용해서 스타일링했는데, 스타일링이 중복 적용되서 디버깅의 어려움, 너무 많은 중복된 코드로 인해 가독성이 떨어짐, css 파일만으로는 구조를 알 수 없어 계속 html 파일을 들여다 보고 와야 하는 불편함 등을 SCSS, styled-component로 해결하게 되어 매우 유용하다고 느꼈고, 유용한걸 배우게 되었다고 생각되니 매우 보람차다.
아쉬운점은, 분명 목차에서는 오늘 styled-component에서 변수를 적용하여 중복된 값을 처리한다는 말을 본 것 같은데 아마 강사님이 빼먹으신듯 하다.
이건 나중에 내가 따로 검색해서 배우면 될듯하다.
그리고 강사님이 CSS를 작성하는 모습을 보면서 많은 테크닉을 배워 좋았다. 내가 기존에 힘겹게 만들었던 리스트에 마진 주기라던가 margin-OOO: auto를 적절히 활용해서 스타일링 하는 테크닉이라던가 absolute, relatvie를 활용해서 겹쳐서 그리는 방법이라던가 하는 것들은 이론만 배워서는 배우기 힘들고 짜는 모습을 직접 봐야 알 수 있는건데, 그러한 것들을 오늘 배워 좋았다.