TIL 2018-10-16

오늘 배운 것

---

• memorybook
• dep
• ref

memorybook

• 커밋 정리하기

지금까지 한 것:

1. search 리덕스 스토어 모듈 기초 완성
2. 더 일반화된 Div, Box같은 element 추가. attrs를 이용하여 props추가하여 사용.d
3. 버튼 스타일 등에서 일반적인 스타일 추출하여 Div, Box element에 넣음.
4. HeaderSearch 컴포넌트 추가
5. navPadding theme 프로퍼티 추가

• div를 아예 createGlobalStyle에서 속성을 설정하면 좋을 것 같은데 global에서 padding을 줘버리면 레이아웃이 망가진다. div를 레이아웃 요소로서 쓴 곳이 많기 때문. 아무래도 div는 정말 element로서만 쓰고 글상자 등에는 Box를 쓰되 Box에 패딩 등 상세 스타일을 주는 식으로 해야 할 듯.

• 빈 꺾쇠 <> </>가 React.Fragment의 숏컷이었다.

아래처럼 커스텀 Div의 props 타입을 정하기도 했는데 별 쓸 데가 없어서 지움.

type OriginalDivProps = JSX.IntrinsicElements["div"];
export interface DivProps extends OriginalDivProps {
  theme: ITheme;
  roundCorner?: boolean;
  children: React.ReactNode;
}

• 생각해보니 Box의 경우 TextBox로만 쓰이긴 하는데.. 아니다 Card처럼 쓸 수도 있긴 할 듯.

• 문제는 Box가 roundCorner, invert 등을 받아서 스타일링을 하는데, HeaderSearchInput을 styled(Box)로 해야 그것들을 이용할 수 있다. 근데 그러면 as를 써야 한다. 하지만 아무리 생각해도 as는 좋은 방법이라는 생각이 들지 않는다. 아래처럼 스타일 파일에서 wrap해서 쓴다면 그나마 나을 듯 한데, 그마저도 잘 되지 않는다.

const HeaderSearchInput : React.SFC<React.InputHTMLAttributes<HTMLInputElement> & BoxProps>
  = ({...rest}) => <HeaderSearchInputInternal invert={false} as={'input'} roundCorner={true} {...rest} />;

이런 식으로 하면 HTMLInputElement의 Attributes를 Div인 HeaderSearchInputInternal에 할당할 수 없어 결국 에러가 난다. 아래같이 하면 에러는 안 나지만 attribute 타입을 잃어버린다.

const HeaderSearchInput = ({...rest}) => <HeaderSearchInputInternal invert={false} as={'input'} roundCorner={true} {...rest} />;

• 지금까지 쓴 것 처럼 아래와 같이 쓰는게 나을까 아니면 전부 다시 함수로 바꿔버릴까?

const HeaderSearchInput = styled.input`
  ${({ theme }) => css`
    padding: ${theme.navPadding};
    border-radius: ${theme.borderRadius};
    width: 350px;
    border: 1px solid ${theme.borderColor};
    background-color: ${theme.primaryColor};
    color: ${theme.navFontColor};
    :focus {
      color: ${theme.hoverEffect(theme.navFontColor)};
      border-color: ${theme.highlightEffect(0.3, theme.borderColor)};
    }
  `};
`;

v.s. 아예 theme에서 styledComponents.InterpolationValue[]를 쓰면 아래와 같이 함수 호출도 필요하지 않다! 문제는 전부 다 바꿔도 되는가. 전부 다 바꾸지 않으면 더 혼란스러워질 수 있다. 또 여기에 이펙트를 더하려면 어떻게 해야 하는가도 복잡해진다. 아마 그런 경우에 함수로 만들어 매개변수로 넘기면 될 거 같긴 하지만.

const HeaderSearchInput = styled.input`
  ${({ theme }) => css`
    ${theme.setNavPadding};
    ${theme.setBorderRadius};
    width: 350px;
    ${theme.setBorder};
    ${theme.setBackgroundColor};
    ${theme.setNavFontColor};
    :focus {
      color: ${theme.hoverEffect(theme.navFontColor)};
      border-color: ${theme.highlightEffect(0.3, theme.borderColor)};
    }
  `};
`;

약간 궁금한 부분인데 타입스크립트에서 다음과 같은 것이 가능할까?

const k = theme.hoverEffect.hoverEffect.navFontColor;

이렇게 해 놓으면 자동으로 동적 계산이 되는 것. 자바스크립트는 어쩌면 되더라도 타입스크립트는 불가능할 듯..

그냥 바꿀 방법이 있다고 해서 다 시도하는건 너무 비효율적이다. 계속 진행하다가 획기적으로 좋다고 생각되는 방법이 있을 때만 적용해보도록 하자.

• 그냥 elements를 전부 지웠다. styled-components는 as를 쓰지 않는 이상 중첩하여 스타일링하면서 html 태그를 바꾸기는 어렵고, 따라서 그냥 기본 사용법을 쓰는 쪽이 나을 것 같다.

• 대체 어떻게 해야 react의 ...react를 커스텀 컴포넌트에서 올바르게 구현할 수 있는거지? 했는데 아래와 같이 extend 하려는 컴포넌트의 export된 props를 갖다 쓰는게 가장 편하고 확실하다. 쓸 때는 그 props로부터 extend해서 쓰면 된다.

import * as React from 'react';
import { LinkProps } from 'react-router-dom';
import { NavItemBox } from './NavItemStyles';

interface INavItemProps extends LinkProps{
  to: string;
  right?: boolean;
  children: React.ReactNode;
}

export const NavItem : React.SFC<INavItemProps> = ({to, children, right=false, ...rest}: INavItemProps) => {
  return (
    <NavItemBox to={to} right={right} {...rest}>
      {children}
    </NavItemBox>
  );
};

• 다시 커밋 정리

지금까지 한 것:

1. search 리덕스 스토어 모듈 기초 완성
2. 타입 이름 바꾸기 및 정리
3. global rule로 다른 필요없는 style rule 제거
4. HeaderSearch 컴포넌트 추가
5. navPadding theme 프로퍼티 추가
6. global css reset 추가

dep

ref

---