TIL 2018-10-14
오늘 배운 것
memorybook
- styled-components 레이아웃 관련 문제.
NavItem이 react-router의 NavLink를 styled로 wrap해서 쓰게 했는데, 이렇게 했더니 헤더에 다른 HeaderSearch를 추가하면서 패딩은 공통된 0.5rem을 써야 하는데 NavItem은 아닌 문제가 있다. 아무래도 NavItem과 NavLink를 분리해야 할 것 같다.
-
어떤 식으로 하는게 제일 나을 지 많이 헷갈린다. 예를 들어 navLink들은 아래 테두리와 글자에 대해 hover 및 active일 때 highlight되고, HeaderSearch의 경우 hover일때는 말고 active일 때 그리고 border만 highlight되어야 한다. 또 글자색도 일치 시켜야 할 수도. 그런 부분들을 어느정도까지 함수화해서 관리해야 하는지? 그 기준은 아무래도 사용할 때가 기준이 되어야 할 것이다. 예를 들면 NavLink는 그냥 쓰면 원하는 그 색이 나와야 한다. 그런데 이것을 generic Box로부터 시작해서 일일히 파라미터를 넘겨줌으로써 구현하려고 하면 오히려 좀 그렇게 된다. 기껏 그에 맞춰 해도 조금만 달라지는 부분이 생기면 또 그 부분에 대해서 작성해야 하게 되고, 그럴 바에야 그냥 그 컴포넌트의 스타일에 대해 css 프로퍼티 한 줄만 써 주면 되는 것이다. 너무 욕심부리는 게 문제다. 나의 욕심은 generic한 Box로부터 모든 컴포넌트를 만들어내는 것인데, 가능하기야 하겠지만.. HeaderSearch의 경우 NavLink와는 전혀 다른 highlight특성을 보인다. 결국 확실히 공통되어야 하는 부분만 묶어 주어야 한다.
-
여전히 theme 프로퍼티 관리가 이대로 좋은가 고민이다. 또다른 방법은 css 함수 등을 이용하여 아예 tagged template string을 반환하는 함수 자체로 할 수도 있을 거 같다. 하지만 간단한 것에 이렇게 할 필요는 없을 듯.
-
현재 theme의 구조 정리: dynamic 및 static propery를 키로 가지되, dynamic property들은 optional인 IStaticTheme과, Required
인 ITheme이 있음. dynamic 프로퍼티들은 calculateTheme 함수에서 theme name에 따라 ('light' | 'dark') 다른 값으로 반환됨. -
styled-components reusable, typed, themed, generic component 만들기
생각보다 쉽지 않다. 아무래도 attr를 써야 하는건가? attr를 쓰는 것과 그냥 감싸서 타입을 더해 …rest를 쓰는 건 어떤 차이가 있는 건가? 아래 코드는 안쪽 Div의 style을 잃어버리는 문제가 있다.
const Box = styled<AdditionalProps & React.HTMLAttributes<HTMLDivElement>>(({
roundCorner, as, invert = false, children, ...rest
})=><Div as={as} {...rest}>{children}</Div>)`${({
theme, invert, roundCorner, ...rest
})=> css`
border-radius: ${roundCorner? '2px' : '0'};
${invert? css`
border: 0;
color: ${theme.fontColor};
background-color: transparent;
` : css``};
`}`;
지금으로선 이게 가장 잘 작동한다.
const Box = styled(Div).attrs<AdditionalProps>({ })`${({
theme, invert, roundCorner, ...rest
})=> css`
border: 1px solid ${theme.borderColor};
border-radius: ${roundCorner? '2px' : '0'};
${invert? css`
border: 0;
color: ${theme.fontColor};
background-color: transparent;
` : css``};
`}`;
attrs 안에 쓸데없이 빈 { }를 써 줘야 하긴 하는데..
Comments