[Recordocs] 20190720

• styled-component 에서 className 속성을 활용하면 컴포넌트 자체를 사용 환경에 맞게 다시 스타일링해서 사용할 수 있다.
  예를들어 아래와 같은 컴포넌트가 있을 때 className 속성을 넣음으로써 다른 컴포넌트에서 Avatar 컴포넌트를 사용할 때 다시 스타일링 해서 쓸 수 있다.

const Avatar = ({size = "sm", url, className}) => {
  return <Container size={size} url={url} className={className} />
};
export Avatar
------------------------------------------------------------------
const StyledAvatar = styled(Avatar)``;

작업을 하다보면 생각보다 위와같은 방식으로 작업을 하게 되는 경우가 꽤 있다. 특히 본인이 만든 컴포넌트가 아닌 다른 라이브러리에서 가져온 컴포넌트에서 어떤 부분을 커스터마이징 하고 싶을 때 간단하게 할 수 있다.
그런데 className 속성이 없다면 해당 방법으로 시도했을 때 아무런 변화도 일어나지 않기 때문에 다른 방법을 찾아야 한다.

• react-router-dom 에서 Link 를 쓸 때 특정 요소에 따라 페이지를 보여주어야 할 때가 있다. 그럴경우 data 를 가져오고, 그 data 에 맞추어서 화면을 출력하게 되는데 data 가 오기전까지 보여질 화면과 data 가 온 뒤에 출력될 화면을 둘 다 마련해 두어야 한다.
  예는 아래와 같다.

<HeaderItem>
 {!data.me ? (
  <SLink to="/">
    <ProfileIcon />
  </SLink>
  ) : (
  <SLink to={data.me.username}>
    <ProfileIcon />
 </SLink>
)}
</HeaderItem>

여기서 바로 Link 의 to 에 data 를 넣으면 해당 값을 읽지 못해 에러를 출력하게 된다.
꼭 이 경우가 아니더라도 data 를 가져오는등의 작업을 할 경우에 이런 접근법도 생각해 볼 만하다.