[React] 스타일 재사용 (styled, css함수)

styled() 함수

Styled components 라이브러리에서 제공하는 기능으로, 기존 컴포넌트에 스타일을 상속하거나 추가 스타일을 적용할 수 있습니다.

// Button.js
import styled from "styled-components";

const Button = styled.button`
  border: 1px solid #58c4dc;
  background-color: #343a46;
  color: #ffffff;
  padding: 16px;

  &:hover {
    background-color: #ffffff;
    color: #343a46;
  }
`;

export default Button;

// App.js
import styled from 'styled-components';
import Button from './Button';

const NewButton = styled(Button)`
  width: 200px;
`;

function App() {
  return (
    <div>
      <NewButton>스타일 상속</NewButton>
    </div>
  );
}

export default App;

 

Button의 모든 스타일을 상속 받은 NewButton이 생성되고, NewButton에는 추가적으로 width: 200px;의 속성이 적용되며, 상속받은 스타일을 유지하면서 새로운 스타일을 추가할 수 있습니다.

---

직접 만든 컴포넌트에 styled() 사용하기

styled() 함수로 HTML 태그를 스타일링할 때는 문제없이 작동하지만, 사용자 정의 컴포넌트의 경우 Styled Components가 내부적으로 생성하는 className을 컴포넌트에 전달하기 때문에 별도의 처리가 필요합니다. 

 

직접 만든 컴포넌트 생성

// HwiironInfo.js
function HwiironInfo() {
  return (
    <div>
    	Hwiiron Blog
    </div>
  );
}

export default HwiironInfo;

---

styled() 함수로 컴포넌트 감싸기

HwiironInfo 컴포넌트를 styled() 함수로 감싸 새로운 스타일을 적용한 StyleHwiironInfo를 만듭니다.

// App.js
import styled from 'styled-components';
import HwiironInfo from './HwiironInfo';

const StyledHwiironInfo = styled(HwiironInfo)`
    font-size: 24px;
    color: #58c4dc;
`;

function App() {
  return <StyledHwiironInfo />;
}

export default App;

 

이렇게 코드를 작성하면 스타일이 적용되지 않습니다. 이유는 Styled Components가 내부적으로 className을 생성하는데, 이 className이 HwiironInfo 컴포넌트에 전달되지 않기 때문입니다.

---

className Prop 전달

HwiironInfo 컴포넌트가 className을 받을 수 있도록 수정합니다. 생성된 className을 최상위 요소로 전달해야 스타일이 제대로 적용됩니다.

// HwiironInfo.js
function HwiironInfo({ className }) {
  return (
    <div className={className}>
    	Hwiiron Blog
    </div>
  );
}

export default HwiironInfo;

 

className을 prop으로 전달받아 <div>에 적용하면 Styled Components가 생성한 스타일이 컴포넌트에 반영됩니다.