본문 바로가기

styled-components3

styled-components무새의 tailwind CSS 도입기 - 1 👀TL; DR 원래는 styled-components를 주로 사용했다. 디자인시스템 구축을 하며 styled-components의 한계를 느꼈다. tailwind CSS를 도입했다. 아직은 혼란스럽다.. tailwind CSS를 '잘 쓰는' 방법을 모색중이다 styled-components를 사용했던 이유 스타일드 컴포넌트를 사용했던 이유는 '컴포넌트화'에 있었다. 컴포넌트화하는 걸 좋아하기도 했고, 컴포넌트 이름을 명시하면서 명확히 해당 태그의 역할이 드러난다는 점도 좋았다. 이 점은 버그 픽싱에도 굉장히 간편함을 느끼게 해줬다. (문제의 원인을 찾는 부분에서 명시성의 장점) 그리고 props로 조건부 스타일링의 장점도 매우 좋았다. 반복되는 컴포넌트에서 색깔만 바뀌는 경우를 많이 봤고, 반복되는 코드.. 2024. 1. 8.

[React] styled-components 📖리액트를 다루는 기술📖을 공부하다가 14장에서 뉴스뷰어를 만드는 부분에서 처음으로 styled-components에 대한 부분이 언급되었다. 이 덕분에 페이지는 이쁘게 완성되었지만 왜 css, sass(scss)를 이용하지않고 styled-components를 사용한 것일까? 이런 궁금증을 얻게 되어 나는 다시 구글링을 시작했다. 구글에 "styled-components"를 쳐보았더니 이 웹사이트가 떴다. 스타일드 컴포넌트의 공식 웹사이트인가 보다. 이 사이트에 딱 처음에 들어가자마자 보면 이렇게 쓰여져있다. Visual primitives for the component age? 일단 뭐 비주얼적으로 도와준다는 소리같다 Use the best bits of ES6 and CSS to style you.. 2021. 2. 3.

[React] ContextAPI를 사용해서 TodoList만들기(1) : styled-components 리액트를 다루는 기술에서는 투두리스트를 만드는 예제를 만들어봤었는데, 그 때와 다르게 이번에는 contextAPI를 이용해서 투두리스트를 만들어보았다. 아직 contextAPI에 대해서 누구에게 설명할 수 있을만큼 정리가 안되어있다는 생각이 들어서 다시 새로운 마음으로 공부를 해봤다. 그래서! 이번 포스트에서는 contextAPI에 대한 개념들에 대해서 설명하고, 투두리스트 코드를 보면서 다시 정리해볼 생각이다. contextAPI를 사용한 투두리스트 예제는 벨로퍼트님의 이 글을 참고해서 작성했습니다. 먼저 styled-components를 사용해서 투두리스트를 꾸며줬는데, 거기서 사용된 스타일링에서 내가 잘 몰랐던 부분들에 대해 적어보려고 한다. createGlobalStyle : 이 기능은 페이지 전.. 2021. 1. 31.

이전 1 다음

티스토리툴바