styled-components (9) 썸네일형 리스트형 styled-components와 flexbox를 이용한 2D 레이아웃 디자인 styled-components의 기본 빌딩 블록인 Box 컴포넌트를 잘 활용하는 방법을 알아봅니다. Flexbox 플렉스박스는 하나의 레이아웃 모드입니다. 플렉스 레이아웃의 기본 아이디어는 사용 가능한 공간을 가장 잘 채울 수 있도록 플렉스 아이템의 너비/높이(및 순서)를 변경할 수 있는 기능을 컨테이너에 제공하는 것입니다 플렉스 컨테이너는 플렉스 아이템을을 확장하여 사용 가능한 여유 공간을 채우거나 항목을 축소하여 오버플로를 방지합니다. 기억해야할 것은, 플렉스 컨테이너는 일반적인 플로우 레이아웃의 인라인, 블록 모드에 따라 렌더링 되지만, 컨테이너 내부에서는 플로우 레이아웃과 다른 배치 알고리즘을 사용한다는 것입니다. 이는 블록 내에 아이템을 채우고 남은 공간을 어떻게 적합하게 채울지에 관한 내용으.. styled-components의 동작 원리와 주의사항 styled-component의 동작 원리와 주의사항을 알아봅니다. 본문에선 언급하지 않았으나, 실제로 styled-components는 useMemo, useCallback과 같은 도구를 이용하여 자체적인 최적화를 많이 수행하고 있습니다. 따라서 불필요한 css 재평가 부하에 대해선 걱정할 필요가 없습니다. 1. styled-components가 CSS를 생성 및 주입하는 방법 styled-components는 css를 lazy 하게 생성 및 삽입함 컴포넌트 렌더링 전까지 탬플릿 리터럴, 혹은 객체로 전달된 css 규칙을 평가하지도 않고, cssom에 반영하지 않음 렌더링하는 css에 대해서만 css 평가 비용을 지불 (비교 - 사전 컴파일 tailwind) js는 defer를 사용하여 다운로드, 처리.. Styled-Components의 비밀 파헤치기 styled-components의 내부 구현을 살펴봅니다. 원문 링크 : https://www.joshwcomeau.com/react/demystifying-styled-components/ Demystifying styled-components For so many React devs, styled-components seems kinda magical. It isn't at all clear how it uses traditional CSS features under-the-hood, and that lack of clarity can cause real problems when things go awry. In this post, we'll learn exactly how styled-com ww.. [짤막글] styled-components는 어떻게 스타일을 적용하는가 TL:DR; className을 사용한다 공식 예제에 가보면 이런 예시가 있다. // This could be react-router-dom's Link for example const Link = ({ className, children }) => ( {children} ); const StyledLink = styled(Link)` color: palevioletred; font-weight: bold; `; render( Unstyled, boring Link Styled, exciting Link ); 리액트 라우터 돔의 Link처럼 생각할 수 있다고 한다. 실제로 아래와 같이 동작한다. 위의 코드를 codeSandbox에 붙여넣고 className만 삭제하면 동작하지 않는다. 즉, styled-.. 디자인 시스템 컴포넌트를 만들 때 고려할 사항들 원문 : building-a-design-system-from-scratch/ Building a Design System from scratch - Maxime Heckel's Blog A deep dive into my experience building my own design system that documents my process of defining tokens, creating efficient components, and shipping them as a package. blog.maximeheckel.com 지속 가능한 UI를 구축하기 위한 헥심은 열쇠는 색상과 타이포그래피에 대한 명확한 표준을 설정하고 재사용 가능한 컴포넌트를 구축하는 것입니다. 전체 코드 보기 : @maximehec.. Styled-Components(CSS-in-js) 잘 활용하기 원문 보기 :https://www.joshwcomeau.com/css/styled-components/ The styled-components Happy Path styled-components is a wonderfully powerful styling library for React, and over the years I've learned a lot about how to use it effectively. This article shares my personal “best practices”. www.joshwcomeau.com CSS Variables Backdrop 컴포넌트에 불투명도와 색상 props가 필요하다고 가정해 보겠습니다. function Backdrop({ opacity, colo.. 리액트 개발자를 위한 CSS Variable 원문 : https://www.joshwcomeau.com/css/css-variables-for-react-devs/ CSS Variables for React Devs CSS Variables are *really* cool, and they're incredibly powerful when it comes to React! This tutorial shows how we can use them with React to create dynamic themes. We'll see how to get the most out of CSS-in-JS tools like styled-components, and how our m www.joshwcomeau.com CSS 변수 정의 / 사용 일반 CSS 변수와.. React에서 마진 대신 Spacer 컴포넌트 활용하기 원문 보기 Let's Bring Spacer GIFs Back! The 90s web gave us many delightful things: web rings, guestbooks, “under construction” animations, and spacer GIFs. In this article, we'll see how I use a Spacer component to solve common layout problems, and why it's often a great tool for the job in www.joshwcomeau.com TL;DR 그리드, 플렉스를 사용하는 경우가 아니면서 마진이 필요한 경우, Spacer 컴포넌트를 고려해본다. HomeButton 컴포넌트를 만들어 봅시다. f.. 이전 1 2 다음
