const Box1 = styled.div` width: 100px; height: 100px; `; const Box2 = styled(Box1)` border-radius: 50px; `; const Box1 = styled.div` width: 100px; height: 100px; `; const Box2 = styled.div` width: 100px; height: 100px; border-radius: 50px; `; 1. 상속 위의 Box1, Box2는 border-radius를 제외한 코드의 내용은 동일하다. 상속을 사용하면 반복을 제거할 수 있다. const Btn = styled.button` color: white; background-color: tomato; border-radi..
타입스크립트에서는 타입을 선언해주기 위해 interface를 생성해주고 그 안에 해당 변수에 대한 타입을 작성한다. interface CircleProps{ bgColor: string; // default borderColor?: string; // optional text?: string; // optional } Circle 컴포넌트가 있다고 가정을 하자 interface CircleProps 내 변수의 타입을 선언하는데 일반적인 콜론(:)을 사용한다면 반드시 string에 해당하는 값을 작성해주어야 한다.(default) 하지만 물음표콜론(?:)을 사용하게되면 borderColor: string | undefined와 동일한 의미로 값이 들어가지 않아도 되는 optional value가 된다. [..
const Box1 = styled.div` background-color: red; width: 100px; height: 100px; `; const Box2 = styled.div` background-color: blue; width: 100px; height: 100px; `; 위와 같은 Box를 두 개 만들어 화면에 표현하고 싶다. 하지만 코드 내용이 background-color를 제외한 부분이 모두 동일하기 때문에 중복코드 작성을 피하고 싶다. => 이 때! props를 활용하면 gooooooooood! Box를 하나만 선언해준 다음 props를 이용해 값을 넘겨주는 방식으로 취하면 중복코드의 걱정이 사라진다. 근데 여기서 또다른 에러가 발생한다! 리액트에서는 에러가 발생하지 않지만, 타입..
