0609

https://react.vlpt.us/

벨로퍼트와 함께하는 모던 리액트 · GitBook

리액트 완강하기. 

 

//styled-components 에서 매개변수로 속성값 제어 하기 위해서

//${props => props.key 를 이용하여 설정 할 수 있음.

const Parent = styled.div`

  background: ${props => props.bgColor};

`;

styled components 에서 커스텀된 컴포넌트를 확장하고 싶을 때

styled(Target) 의 구조로 확장 할 수 있다.

const Parent = styled.div`

  background : rgba(0, 0, 0, 0.3);

`;

const Child = styled(Parent)`

  color : white;

  font-size : 16px;

`;

// 컴포넌트를 사용할때 <SC as="newType"> 을 통해 다른 태그로 사용 할 수 있음.

const Button = styled.button`

  width : 100px;

  height : 20px;

  background : transparent;

  color : white;

`;

 

<Button as="span"/> 과 같이 스팬 태그로 바꿔 사용 가능하다.

 

// 컴포넌트의 특정 속성값을 주기 위해서 .attrs 라는 녀석에 객체를 전달하여 해결 할 수 있음.

const Input = styled.input.attrs({ required: true })`

background : transparent;

width : inherit;

`;

 

위의 경우 Input 컴포넌트가 기본값으로 required :true 를 가지고 있음을 알 수 있음.

styled-components 내부 태그에 접근하기 위해서

일반 css 의 경우

parent target {} 와 같이 사용해주었는데

styledcomponent 에서

parent {

  &:hover {

     font-size:32px;

  }

}

와 같이 사용 할 수 있음을 알 수 있었다.