![]()
* Emotion.js를 사용해서 스타일 컴포넌트를 생성하려고 합니다. * React 디자인 패턴인 Presentational - Container 패턴을 사용한 기준으로 설명하였습니다. 고민 Native하게 HTML Element + CSS or Sass를 사용할 수도 있겠지만, CSS in JS의 편리함 때문에 스타일 컴포넌트를 많이 사용하고 계실 겁니다. 스타일 컴포넌트는 페이지 / 컨테이너 / 컴포넌트 어느 곳이든 사용할 수 있을 텐데요. 개발을 진행하면 할수록, 계속 쌓여가는 스타일 컴포넌트를 어떻게 관리해야 할지? 에 대한 고민이 생깁니다. 1. 페이지 Level // Page.js import styled from '@emotion/styled'; import Container from '@..
![]()
create-next-app을 이용해서 새로운 Next.js 프로젝트를 만들고, 개발을 진행했습니다. 프로젝트에서는 Emotion.js를 사용하고 있는데요. 개발을 잘 진행하고 있다가, 다음과 같은 문제가 발생했습니다. 다음과 같은 코드를 보시면, HTML 요소를 스타일링 해줄 때, 다음과 같이 CSS 선택자를 이용하는데요. ...생략 하이 div p { color: red; font-weight: bold; } Component Selector(컴포넌트 선택자)란 상위의 컴포넌트에서 스타일링을 적용을 할 때, 하위의 컴포넌트를 선택해서 스타일링을 하는 것을 의미합니다. import styled from '@emotion/styled'; const Child = styled.div` color: red;..
