React) styled-component

styled-components

• props 값으로 전달 값을 스타일에 입힐 수 있음

•       import React from 'react';
      import styled, { css } from 'styled-components';
  
      const Box = styled.div`
          /* props로 넣어준 값을 직접 전달해줄 수 있음 */
          background: ${props => props.color || "blue"};
          padding: 1rem;
          display: flex;
      `;
  
      const Button = styled.button`
        background: white;
        color: black;
        border-radius: 4px;
        padding: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        font-size: 1rem;
        font-weight: 600;
  
        /* & 문자를 사용하여 Sass처럼 자기 자신 선택 가능 */
        &:hover {
          background: rgba(255, 255, 255, 0.9);
        }
  
        /* 다음 코드는 inverted 값이 true일 때 특정 스타일을 부여해 줍니다. */
        ${props =>
          props.inverted &&
          css`
          background: none;
            border: solid;
            color: white;
            &:hover {
              background: white;
              color: black;
            }
            & + button {
              margin-left: 1rem;
            }
          `}
      `;
  
      const StyledComponent = () => (
        <Box color="black">
          <Button>안녕하세요</Button>
          <Button inverted={true}>테두리만</Button>
        </Box>
      );
  
      export default StyledComponent;

  • Tagged 템플릿 리터럴을 이용하기 때문에 styled-components로 만든 컴포넌트의 props를 스타일 쪽에서 쉽게 조회하도록 구성됨

• 스타일링된 엘리먼트 만들기

  • ```javascript

      import styled from 'styled-components';
    
    const Sample = ({ className }) => {
      return <div className={className}>Sample</div>;
    };
    
    const StyledSample = styled(Sample)`
      font-size: 2rem;
      background: gray;
      min-width: 100px;
    `;
    
    export default StyledSample;
    ```

  • <StyledSample className ="zin0"/>

    • 스타일링된 태그를 styled tag로 생성하는데, 부모 컴포넌트에서 props를 설정해서 값을 받도록 한다.

• props에 따른 조건부 스타일링

  •       ${props =>
            props.inverted &&
            css`
            background: none;
              border: solid;
              color: white;
              &:hover {
                background: white;
                color: black;
              }
              & + button {
                margin-left: 1rem;
              }
            `}

  • 앞서 작성한 예시를 보면, props의 inverted 값이 true일 때 위의 css를 부여하고 있다.
  • props를 참조하지 않는다면 CSS를 불러와서 사용하지 않아도 되지만, props를 참조한다면 반드시 CSS로 감싸주어 Tagged 템플릿 리터럴을 이용해야함

• 반응형 디자인

  • 일반 CSS와 동일하게 @media를 이용한다.

  •       const Box = styled.div`
          /* props 로 넣어준 값을 직접 전달해줄 수 있습니다. */
          background: ${props => props.color || 'blue'};
          padding: 1rem;
          display: flex;
          /* 기본적으로는 1024px 에 가운데 정렬을 하고
            가로 크기가 작아짐에 따라 사이즈를 줄이고
            768px 미만으로 되면 꽉 채웁니다 */
          width: 1024px;
          margin: 0 auto;
          @media (max-width: 1024px) {
            width: 768px;
          }
          @media (max-width: 768px) {
            width: 100%;
          }
        `;

  • 위의 media 작업 또한 함수화를 통해 쉽게 구현할 수 있음

  •       import React from 'react';
        import styled, { css } from 'styled-components';
    
        const sizes = {
          desktop: 1024,
          tablet: 768
        };
    
        // 위에있는 size 객체에 따라 자동으로 media 쿼리 함수를 만들어줍니다.
        // 참고: https://www.styled-components.com/docs/advanced#media-templates
        const media = Object.keys(sizes).reduce((acc, label) => {
          acc[label] = (...args) => css`
            @media (max-width: ${sizes[label] / 16}em) {
              ${css(...args)};
            }
          `;
    
          return acc;
        }, {});
    
        const Box = styled.div`
          /* props 로 넣어준 값을 직접 전달해줄 수 있습니다. */
          background: ${props => props.color || 'blue'};
          padding: 1rem;
          display: flex;
          width: 1024px;
          margin: 0 auto;
          ${media.desktop`width: 768px;`}
          ${media.tablet`width: 768px;`};
        `;

    • target device에 따라 반응형 디자인을 쉽게 제공할 수 있다.

---

Reference

리액트를 다루는 기술