Front-end
-
[Styled-component] styled-component 좀 더 똑똑하게 쓰기Front-end/React 2021. 12. 13. 17:22
안녕하세요. 오늘 포스팅할 주제는 'styled-component'입니다! 리액트를 사용하는 분이라면 다양한 css 라이브러리를 사용하실텐데 저는 CSS-IN-JS의 대표적인 라이브러리 중 하나인 styled-component를 사용 중입니다. 하지만 요즘 styled-component의 재사용성을 제대로 사용하지 않는 저를 발견하고 styled-component의 다양한 기능과 재사용성을 더욱 심도있게 사용해보자라는 마음에 포스팅을 하게 되었습니다! 우리 모두 styled-component를 제대로 사용해 보도록 합시다! #1 Styled-component의 props전달을 잘 사용하자. 같은 h2 태그를 가진 element를 사용해야 한다고 가정해보겠습니다. 둘 다 부제목이지만 다른 폰트 사이즈를 사..
-
[React] 리액트 꿀라이브러리 탐방Front-end/React 2021. 12. 8. 16:25
더보기 계속해서 라이브러리가 업데이트 될 예정입니다. 👨🏻💻 1. react-helmet SPA의 가장 큰 단점이 무엇일까요? SEO? 우리는 고정된 타이틀만을 사용할 수 밖에 없습니다. 왜냐하면 우리는 싱글 페이지 내에서 컴포넌트들의 변화만 볼 수 있을 뿐이니까요. 하지만 react-helmet을 사용하면 우리는 페이지마다 타이틀을 변경해 줄 수 있습니다. ✌🏻 npm install react-helmet 사용법은 굉장히 간단합니다. react-helmet을 프로젝트에 import한 후 다음과 같이 헬멧 안에 title 태그와 함께 자신이 적용하고 싶은 타이틀을 적용하면 됩니다.