bravo my life!

1. 개요 & + & 선택자를 사용한다면 편하게 margin을 관리할 수 있다. 연속되는 같은 클래스의 요소들 중 첫 번째 요소를 제외한 나머지만 속성을 줄 수 있는 선택자이다. 하지만 하나의 styled-components 변수안에서 & + & 선택자를 두 번 사용하게 된다면 적용이 불가능하다. styled-components 버전 5.2.0 부터 발생된 문제로 보인다. 똑같은 동작을 하는 다른 방법은 없을까? 2. 코드 상세 좌측이 수정 전, 우측이 수정 후 코드이다. & + & 로 사용하던 선택자를 &:not(:first-child)로 변경하여 첫번째 자식요소를 제외하게 만들어 주었다. 이상없이 작동이 된다.

1. 개요 리액트와 자바스크립트로는 손쉽게 했던 styled-components defaultProps 사용이 타입스크립트에서는 복잡한 느낌이 들어 기록을 위해 포스팅 한다. 2. styled-components에서 defaultProps는 왜 사용할까? defaultProps라는 이름에서 유추할 수 있듯이 CSS를 부모요소에서 props로 전달받기 위해 사용한다. 기본값을 정해 두고 부모요소에서 CSS를 변경할 수 있는 기능인데, 컴포넌트화를 하려 한다면 사용해보자. 가령, 부모요소에 같은 컴포넌트가 여러개 있다고 가정을 하고 각각 CSS를 다르게 적용하고 싶은 상황이 있을 것인데 바로 그럴 때 사용하면 좋은 기능이다. defaultProps로 background: black을 지정한 뒤 styled ..

1. 개요 boolean값으로 상태를 관리하며 어떤 아이콘을 false때는 상단에 빨간점을 표시하지 않고, true때는 상단에 빨간점을 표시하는 기능을 만들어 볼 것이다. 2. 코드 상세 //HomeHeader.tsx import { useState } from 'react'; import styled from 'styled-components'; //인터페이스를 사용하여 NotiState의 타입을 지정해준다. interface NotiState { noti: boolean; } const NotificationButtons = styled(IonButtons)` margin-right: 20px; `; //noti의 boolean 상태값에 따라 백그라운드 이미지를 바꾸어 줄 것이다. const Noti..