styled-components

스타일 컴포넌트를 사용하면서 많이 익숙해졌지만, 오늘 제일 곤란했던게 리액트에서는 컴포넌트들로 나누어서 레고(?)처럼 컴포넌트들을 쌓아가고, 재사용을 하는 것인데 styled-components를 사용하면서 자식 컴포넌트에 props를 주고 그 props에 따라 스타일을 다르게 하고 싶었다. 처음에는 BtnContainer.jsx에 styled-components를 다 넣어두고 Btn을 컴포넌트화 하지 않고 BtnContainer.jsx에 다 넣어 뒀었다. 하지만 이렇게 되면 다른 컴포넌트에서 재사용을 하기 어려울 것 같았다. 내가 원하는 건 Btn.jsx로 컴포넌트로 분리해 놓고 다른 곳에서 props만 다르게 주고 children으로 Btn 의 값을 다르게 설정하고 싶었다.

props를 내려주기 위해 고민을 많이 하고 이것저것 찾아봤었지만, 구글링에 나오는 것은 props를 자식 컴포넌트에 전해주는 것이 아닌 styled-component 내에서 props를 전해주는 것이었다.

근데 공식 문서를 보니 바로 해결이 되었다는.. 🥹

문제 해결

components > BtnContainer.jsx

자식 컴포넌트로 사용하기 위해서 import 해오기

...
import Btn from './Btn';

...

function ButtonContainer() {
...
  return (
    <div>
      <h2>Button</h2>
      <BtnWrapper>
        <Btn onClick={() => alert('버튼을 만들어보세요')} lgBtn> // lgBtn이라는 props 내려주기
          Large Primary Button
        </Btn>
        <Btn>Medium</Btn>
        <Btn smBtn>Small</Btn>
      </BtnWrapper>
      <BtnWrapper>
        <Btn onClick={promptHandler} lgBtn danger dangerBg>
          Large Primary Button
        </Btn>
        <Btn danger>Medium</Btn>
        <Btn smBtn danger>
          Small
        </Btn>
      </BtnWrapper>
    </div>
  );
}

export default ButtonContainer;

components > Btn.jsx

import styled, { css } from 'styled-components';

const BtnStyle = styled.button`
  margin: 0.625rem;
  :hover {
    cursor: pointer;
  }
  :active {
    opacity: 0.7;
  }
	{/* 부모 컴포넌트에서 주는 props에 따라 다른 값 주기 */}
  ${(props) =>
    props.lgBtn &&
    css`
      background-color: var(--lg-box-bgcolor);
      border: var(--lg-box-border);
      width: var(--lg-box-width);
      height: var(--lg-box-height);
      font-weight: bold;
    `}
  ${(props) =>
    props.smBtn &&
    css`
      width: var(--sm-box-width);
      height: var(--sm-box-height);
    `}
    ${(props) =>
    props.danger &&
    css`
      background-color: ${(props) => (props.dangerBg ? 'var(--lg-box-bgcolor)' : 'var(--color-danger)')};
      color: var(--color-danger-text);
      border: var(--lg-danger-box-border);
    `}
`;

function Btn({ children, ...props }) {
  return <BtnStyle {...props}>{children}</BtnStyle>;
}

export default Btn;

마치며

구글링도 좋지만 공식 문서도 꼭 보자..!! 😗