[React] Custom Component

1. 컴포넌트 만들기

const 컴포넌트이름 = styled.태그종류`                                           const BlueButton = styled.button`       CSS속성1 : 속성값;                                             ➡️                           background-color : blue;       CSS속성2 : 속성값;                                                                           color : white;   `;                                                                                                        `;

Styled Components는 따옴표가 아닌 백 틱(`)`을 사용

컴포넌트를 선언 후, styled.태그종류를 할당하고 백 틱 안에 기존에 CSS를 작성하던 문법과 똑같이 속성을 작성

 

 

2.  컴포넌트를 재활용해서 새로운 컴포넌트 만들기

const 컴포넌트이름 = styled(재활용할 컴포넌트)`                            const BigBlueButton = styled(BlueButton)`       추가할 CSS속성1 : 속성값;                                   ➡️                           padding : 10px       추가할 CSS속성2 : 속성값;                                                                 margin-top : 10px `;                                                                                                        `;

컴포넌트를 선언하고 Styled()에 재활용할 컴포넌트를 전달해주고 속성을 작성

 

 

3. Props 활용하기

const 컴포넌트이름 = styled.태그종류`     CSS속성 : ${(props) => 함수코드 } `;

(${}) 사용하기

 

 

1) Props로 조건부 렌더링하기

const Button = styled.button`     background: ${(props) => props.skyblue ? "skyblue" : "white"} `;

삼항연산자로 <Button> 컴포넌트에 skyblue라는 props가 있는지 확인후 있으면 skyblue, 없으면 white

 

 

2) Props 값으로 렌더링하기

const Button = styled.button`     background: ${(props) => props.color ? props.color:"white"} `;

삼항연산자로 props.color가 없으면 white, 있다면 props.color 값을 가져와 속성값을 리턴

(꼭 삼항연산자를 사용하지 않아도 됨)