[React] styled-components props, 상속, as, attrs

목적

• styled-components를 사용하고 있기는한데 정말 기본적으로만 사용하고 있어서 새롭게 알게된 것을 정리해보려고함

 

 

props

const Box = styled.div`
	background-color: ${(props) => props.bgColor};
	width: 100px;
	height: 100px
`

function App() {
	return(
		<>
		<Box bgColor="teal" />
		<Box bgColor="tomato" />
		</>
	)
}

 

• 중복되는 css 코드가 많은 사각형을 만들어야한다면
• background-color 만 변경할 수 있도록 props를 전달하여 컬러값만 변경 가능하다.

 

상속

const Box = styled.div`
	background-color: ${(props) => props.bgColor};
	width: 100px;
	height: 100px
`

const SubBox = styled(Box)`
	width: 200px;
`

function App() {
  return (
    <>
        <Box bgColor="teal" />
		<SubBox bgColor="grey" />
    </>
  );
}

 

• props 를 생성할때와 마찬가지로 추가적인 박스의 속성 하나만이 변경되기를 원한다면
• styled(Box) 라고 기존의 Box를 상속받아 크기만 변경해 줄 수 있다.

 

as

• styled-components 를 사용하고 변수를 사용할 때 as 속성을 넣어줄 수 있다.
• as 속성은 div, button, input 등 styled-components 변수 선언 시 html 태그를 정해주지만 as 를 사용함으로써 
• 동일한 css 가지지만 태그만 변경하도록 할 수 있음

const Btn = styled.button`
  color: white;
  background-color:tomato;
  border: 0;
  border-radius: 15px;
`

function App() {
  return (
    <>
        <Btn >Log in</Btn>
        <Btn as="a" href="/">Log in</Btn>
    </>
  );
}

• as="a" 라고 속성을 넣어준다면 해당 태그는 button이 아닌 앵커 태그로 변경이 된다

 

attrs

• styled-components 로 input 태그를 작성할때 JSX 코드 내에서 input 태그를 끝 없이 불러와야하는 상황
• input 태그마다 placeholder, minLength, required 를 작성 해야하는 상황일때 사용

const Input = styled.input.attrs({required: true, minLength:10, placeholder:"text"})`
  background-color: tomato;
`

function App() {
  return (
    <>
        <Input  />
        <Input  />
        <Input  />
        <Input  />
        <Input  />
        <Input placeholder="run"  />
    </>
  );
}

export default App;

• 사용 후에 하나의 태그만 placeholder 를 변경하고 싶었으나 아쉽게도 placeholder 변경은 불가능 했음
• placeholder 하나만 변경하고싶어 혹시 attrs 내부에서 props를 사용할 수 있을까 했지만 그것도 불가능 했음