CDD란 마치 레고부품처럼 조립해 나갈 수 있는 UI컴포넌트를 만들어 나갑니다👍
우리가 작업할 때를 생각해봅시다.
협업의 규모가 커지고 프로젝트의 규모가 커질수록, CSS 역시 코드처럼 규율화 되면 더욱 작업할 때 좋겠죠?
이 때 CSS전처리기라는 개념이 등장합니다.
CSS가 구조적으로 작성되게 도움을 주는 친구죠💜🐹
오늘은 그 중 하나인 styled-component에 대해 알아볼까 합니다.
styled components
const 컴포넌트의이름 = styled.태그종류`
css속성1 : 속성값
css속성2: 속성값
`;위의 예제를 그대로 적용해보면 밑과 같습니다 🐹
const MangoButton = styled.button`
background-color: yellow;
color : black;
`;props를 react컴포넌트처럼 내려주고 재활용할 수 있는 방법도 있습니다
const 컴포넌트이름 = styled(재활용할 컴포넌트)`
추가할 CSS속성1 : 속성값
추가할 CSS속성2 : 속성값
`;실제 예제로 적용해 보면 아래와 같습니다🐹
const BigMangoButton = styled(MangoButton)`
padding: 10px;
margin-top : 10px
margin-bottom : 10px
`;위의 MangoButton은 그대로 가져오면서 추가할 속성만 덧붙인
BigMangoButton이 완성되었습니다!
이제 props를 활용한 방법을 알아보겠습니다.
react에서 props를 내려주는 것처럼, styled component로 만든 컴포넌트 역시
props로 내려주는 방법인데요,
const 컴포넌트이름 = styled.태그종류`
css 속성 : ${(props)}=> 함수코드}
`;- props로 조건부 렌더링하기
- props 그자체의 값으로 렌더링하기
순으로 알아보겠습니다😏
1번은 조건부 렌더링인데요,
react에서 조건문을 적을 때, 우리는 삼항연산자를 쓰게됩니다.
이와 비슷하게 조건을 button에 대입해보면,
const Button = styled.button`
background: ${(props)=> props.skyblue ? "skyblue":"white"}
`;버튼에 skyblue라는 props가 있으면 배경색으로 skyblue를,
<Button skyblue>Button1</Button>없을경우에는 white로 지정해줍니다.
<Button ___>Button1</Button>Button 옆에 들어가는게 props라는걸 알아보셨죠?!😎
두번째로는 props그 자체의 값으로 렌더링하는 것입니다.
props 그 자체의 값으로 렌더링이라...무슨 뜻일까요?
위에서는 props 뒤에 바로 빨간색, 파란색이 직접적으로 들어왔다면,
우리는 이제 props 뒤에 붙는 요소의 값에 집중해볼겁니다!
const Button = styled.button`
background:${(props)=> props.color? props.color:"white"}
`;
const Button = styled.button`
background:${(props)=> props.color || "white"}
`;props 뒤에 color가 붙었네요!
위를 해석해보면, props.color의 값이 있으면
그 값의 색으로,
없다면 하얀색으로 버튼을 주겠죠😲
위의 두 식은 결과적으로 같은 식입니다.
삼항연산자를 썼느냐 안썼느냐의 차이입니다.
위에서 얻을 수 있는 결론은 삼항연산자 뿐만 아니라 Javascript 코드라면 무엇이든 사용할 수 있다! 가 되겠습니다.
