On.

Styled Component

1) Props 조회

• styled.div옆의 <>은 타입 명시이기 때문에 써주면 좋지만, 안써줘도 props 조회가 가능하다.

const Image = styled.div<{ src: string }>`
  background: url(${(props) => props.src});
`;

const Product: React.FC<Props> = ({ product }) => {
  return (
    ...
      <Image src={product.productImg} />
    ...
  );
};

2) basic element에 style 주입

• 아래의 코드에서 여러개의 Product 컴포넌트를 감싸는 div는 ProductList로 명명하는 것이 적절할 것이다.
• 하지만 ProductList는 이미 해당 함수형 컴포넌트에서 사용중이다.
• styled component를 사용하여 최상위 div의 style을 적용하고 싶은데 어떻게 해야할까?
• 아래와 같이 export 아래에 styled component식으로 선언해 주고, passProps를 이용하여 div에 스타일을 적용한다!

const ProductList: React.FC<Props> = (props) => {
  const { ...passProps } = props;
  return (
    <div {...passProps}>
      {productList?.map((item) => (
        <Product product={item}></Product>
      ))}
    </div>
  );
};

export default styled(ProductList)`
   ...
`;
`

Off.

프론트와 백을 넘나드는 리드 개발자가 되는 그날까지 🔥🔥🔥