Styled Component에서 컴포넌트 확장하기

옛날에 리액트 처음 익힐때 다 공부했던 것 같은데, 프로젝트들을 하다보니 비슷한 컴포넌트를 생성하는 경우가 많은데 무시하고 계속 하다가 .. '아 옛날에 이거 공부했었는데 .. ' 싶어서 정리하게됐다. 

 

일단 그 전에 styled component 를 쓰는 이유는 
기존에 div를 만들고 className 이나 style을 부여하는 식이었지만,

대신 styled를 임포트 해서 우리가 사용할 html 에서 사용하고 싶은 태그를 지정하고, 백틱 안에 css코드를 적어준다. -> 컴포넌트 

이렇게 하게 되면 스타일링 된 컴포넌트를 사용함으로써, 컴포넌트 함수 안에 스타일을 적을 필요가 없고, 가독성이 좋아진다. 

 

나는 큼직한 or 많이 사용할만한 컴포넌트들은 스타일 컴포넌트로 지정하고, 그 안의 자잘한 텍스트나 버튼들은 그냥 html 태그를 사용했는데, 모든 ui 요소를 스타일 컴포넌트로 지정하기가 너무 귀찮아서였다.... 장단점이 있지만,, 오늘 복습했던 기능들은 꼭 써보고 싶다. 
 

 

---

React에서 styled-components를 사용할 때, 기존에 만든 스타일을 재사용하거나 확장하고 싶은 경우가 많다.

이럴 때 사용할 수 있는 방식 중 하나가 styled(기존 컴포넌트) 문법이다.

 

✅ 기본 Box 컴포넌트 만들기

먼저, 기본이 되는 박스 컴포넌트를 하나 만든다.

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

 

이 Box는 bgColor라는 prop을 받아 배경색을 바꿀 수 있다. 이렇게 하면 재사용성이 훨씬 높아진다.

---

✅ Box를 확장하여 Circle 만들기

Box 컴포넌트를 확장해서 Circle이라는 컴포넌트를 만들 수 있다. styled(Box)를 이용하면 된다.

const Circle = styled(Box)` 
	border-radius: 50px; 
`;

 

이렇게 하면 Box의 스타일은 그대로 유지하면서, border-radius 속성만 추가된 새로운 컴포넌트를 만들 수 있다.

---

✅ 실제 사용 예시

 

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

결과 화면:

• Box: 배경색이 teal인 정사각형
• Circle: 배경색이 tomato이고, 둥글게 처리되어 원형이 됨

추가 )

attrs와 as 속성으로 더 유연하게 다루기

styled-components를 사용할 때 단순히 스타일링뿐만 아니라 속성을 추가하거나, 컴포넌트의 태그를 동적으로 바꾸고 싶을 때가 있다. 이럴 때 유용한 기능이 바로 .attrs()와 as prop이다.

---

✅ .attrs()로 기본 속성 지정하기

attrs()를 사용하면 HTML 속성을 기본값으로 지정할 수 있다. 예를 들어 input 컴포넌트에 required, minLength 속성을 항상 적용하고 싶다면 다음과 같이 작성한다. 같은 컴포넌트를 여러번 사용할 때, 매번 HTML 속성값을 지정하지 않아도 되서 편리함! 

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

 

 

✅ .attrs()는 props로 받아서 동적으로 설정하는 것도 가능하다!

---

✅ as prop으로 태그 바꾸기

어떤 컴포넌트를 버튼(<button>)으로 만들었지만, 경우에 따라 링크(<a>)로도 사용하고 싶을 때 as 속성을 활용하면 된다.

예를 들어 Btn이라는 버튼 컴포넌트를 아래처럼 정의했다면:

const Btn = styled.button` 
	background-color: tomato; 
    border: none; 
    padding: 10px 20px; 
    color: white; 
    font-weight: bold; 
    cursor: pointer; 
`;

 

as="a"를 사용해서 <a> 태그처럼 사용할 수 있다.

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