숙련주차, Styled Components ,Css-in-JS

숙련주차, Styled Components, Css-in-JS

JS code → CSS 코드 컴포넌트를 꾸미는 방식

 

styled-components 패키지 설치

$ yarn add styled-components

 

App.js

import './App.css';
import styled from "styled-components";

const StContainer = styled.div`
  display: flex;
`

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
  background-color: ${(props) => props.backgroundColor};
`;

function App() {
  return (
    <StContainer>   
      <StBox borderColor="red" backgroundColor="yellow">박스</StBox>
      <StBox borderColor="blue">박스</StBox>
      <StBox borderColor="green">박스</StBox>
    </StContainer>
  );
}

// props : 부모 컴 → 자식 컴

export default App;

SC의 기본적인 원리는 꾸미고자 하는 컴포넌트를 SC의 방식대로 먼저 만들고, 그 안에 스타일 코드를 작성하는 방식으로 진행

---

컬러를 배열로 저장한뒤, map 함수 이용!

 

App.js

import './App.css';
import styled from "styled-components";

const StContainer = styled.div`
  display: flex;
`

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
  background-color: ${(props) => props.backgroundColor};
`;

// 박스의 색
const boxList = ['red', 'blue', 'green'];

// 색을 넣으면 이름을 반환
const getBoxName = (color) => {
  switch(color) {
    case 'red':
      return '빨간박스';
    case 'green':
      return '초록박스';
    case 'blue':
      return '파란박스';
    default:
      return '검정박스';
  }
};

function App() {
  return (
    <StContainer>
      {
        boxList.map ((item) => (
          <StBox borderColor={item}>{getBoxName(item)}</StBox>
        ))
      }
    </StContainer>
  );
}

// props : 부모 컴 → 자식 컴

export default App;

---

CSS-in-JS : 자바스크립트로 CSS 코드를 작성하는 방식

props를 통해서 부모 컴포넌트에서 자식컴포넌트로 전달, 조건부 스타일링 가능