리액트 - [Styled components] 시작하기/Nesting

npm init react-app 프로젝트명

npm install styled-components

 

> 뭔가 잘 안되서 프로젝트명 대신 . 으로 명령어를 적어줬다. 

 

 

▼ 잘 설치됐는지 확인해보고

// package.json

{
  ...
  "dependencies": {
      ...
      "styled-components": "^5.3.5"
    },
}

 

//src/Button.js

import styled from 'styled-components';

// 태그 만들기 styled.tagname
const Button = styled.button`
  background-color: #6750a4;
  border: none;
  color: #ffffff;
  padding: 16px;
`;

export default Button;

//src/App.js
import Button from './Button';

function App() {
  return (
    <div>
    // 컴포넌트 사용하기
      <Button>Hello Styled!</Button>
    </div>
  );
}

export default App;

Styled Components가 알아서 클래스 이름을 만들고 스타일을 적용해준다 ! 

 

말그대로 Components 이기때문에 이전에 사용했던것처럼 동일하게 사용해준다

---

Nesting 문법

import styled from 'styled-components';

const Button = styled.button`
  background-color: #6750a4;
  border: none;
  color: #ffffff;
  padding: 16px;

  &:hover,
  &:active {
    background-color: #463770;
  }
`;

export default Button;

& 는 부모 선택자 를 의미 -> 기존에 css에서 쓰던 .Button:hover 랑 동일하다고 보면 댄당

 

import styled from 'styled-components';
import nailImg from './nail.png';

const Icon = styled.img`
  width: 16px;
  height: 16px;
`;

const StyledButton = styled.button`
  background-color: #6750a4;
  border: none;
  color: #ffffff;
  padding: 16px;

  & ${Icon} {
    margin-right: 4px;
  }

  &:hover,
  &:active {
    background-color: #463770;
  }
`;

function Button({ children, ...buttonProps }) {
  return (
    <StyledButton {...buttonProps}>
      <Icon src={nailImg} alt="nail icon" />
      {children}
    </StyledButton>
  );
}

export default Button;

부모 컴포넌트 (Button) 안에 자식 컴포넌트(Icon, StyledButton) 추가 

 

& $ {자손 컴포넌트}

& 생략이 가능하다

 

nesting 안에 또 nesting 규칙을 줄 수있다.

const StyledButton = styled.button`
  ...
  &:hover,
  &:active {
    background-color: #7760b4;

    ${Icon} {
      opacity: 0.2;
    }
  }
`;

---

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

const SIZES = {
  large: 24,
  medium: 20,
  small: 16,
};

const Button = styled.button`
  background-color: #6750a4;
  border: none;
  border-radius: ${({ round }) => round ? `9999px` : `3px`};
  color: #ffffff;
  font-size: ${({ size }) => SIZES[size] ?? SIZES['medium']}px;
  padding: 16px;

  &:hover,
  &:active {
    background-color: #463770;
  }
`;

export default Button;

//App.js

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

const Container = styled.div`
  ${Button} {
    margin: 10px;
  }
`;

function App() {
  return (
    <Container>
      <h1>기본 버튼</h1>
      <Button size="small">small</Button>
      <Button size="medium">medium</Button>
      <Button size="large">large</Button>
      <h1>둥근 버튼</h1>
      <Button size="small" round>
        round small
      </Button>
      <Button size="medium" round>
        round medium
      </Button>
      <Button size="large" round>
        round large
      </Button>
    </Container>
  );
}

export default App;

font-size: ${(props) => SIZES[props.size]}px;

구조분해

font-size: ${({ size }) => SIZES[size]}px;

 

기본값 지정

font-size: ${({ size }) => SIZES[size] ?? SIZES['medium']}px;

size Prop이 값이 없거나 잘못된 값이면 어떻게 될까요? Styled Components에서는 undefined 값을 빈 문자열로 처리해 주기 때문에 font-size: px 같은 잘못된 CSS 코드가 됩니다.

 

논리연산자 사용

${({ round }) => round && ` border-radius: 9999px; `}

 

삼항연산자 사용

border-radius: ${({ round }) => round ? `9999px` : `3px`};