Styled Component__[props 조회하기]

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.


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

좋은 웹페이지 즐겨찾기