[Styled Components] Styled Components

준비물

'styled-components' 플러그인

styled-components 설치하기( yarn add styled-components )

 

 

스타일 컴포넌트 적용하기

// src/App.js

import React from "react";
import styled from "styled-components";

// 1. styled-components를 만들었습니다.
const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor}; // 4.부모 컴포넌트에서 보낸 props를 받아 사용합니다. 
  margin: 20px;
`;

const App = () => {
  return (
    <div>
// 2. 그리고 위에서 만든 styled-components를 사용했습니다.
// 3. 그리고 props를 통해 borderColor라는 값을 전달했습니다.
      <StBox borderColor="red">빨간 박스</StBox>
      <StBox borderColor="green">초록 박스</StBox>
      <StBox borderColor="blue">파랑 박스</StBox>
    </div>
  );
};

export default App;

 

Swtich문과 map을 사용해서 리팩토링 해보기

 

// src/App.js

import React from "react";
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;
`;
// 박스의 색을 배열에 담습니다.
const boxList = ["red", "green", "blue"];

// 색을 넣으면, 이름을 반환해주는 함수를 만듭니다.
const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "빨간 박스";
    case "green":
      return "초록 박스";
    case "blue":
      return "파란 박스";
    default:
      return "검정 박스";
   }
};
const App = () => {
  return (
    <StContainer>
{/* map을 이용해서 StBox를 반복하여 화면에 그립니다. */}
      {boxList.map((box) => (
        <StBox borderColor={box}>{getBoxName(box)}</StBox>
      ))}
    </StContainer>
  );
};

export default App;

 

컴포넌트화

import React from "react";
import styled from "styled-components";

const StInput = (props) => {
  const { fontSize, width, height, borderRadius, onChange, border, borderColor, margin, name, type } = props;
  const styles = { borderRadius, width, height, fontSize, border, borderColor, margin, name, type };

  return <Input {...styles} onChange={onChange} />;
};

StInput.defaultProps = {
  borderRadius: "10px",
  fontSize: "15px",
  width: "80%",
  height: "2.5rem",
  border: "1px",
  type: "text"
};

const Input = styled.input.attrs(props => ({
  type: props.type
}))`
  border: ${(props) => props.border} solid ${(props) => props.borderColor};
  font-size: ${(props) => props.fontSize};
  height: ${(props) => props.height};
  width: ${(props) => props.width};
  border-radius: ${(props) => props.borderRadius};
  text-indent: 10px;
  margin: ${(props) => props.margin};
  name: ${(props) => props.name};
  :focus{
    outline: 2px solid 	#e6d96b;
    border: 1px solid transparent
  }
`;


export default StInput;

import 후 버튼 컴포넌트 사용

        <StButton width="50%" height="40px" borderColor="red" onClick={() => onDeleteTodo(todo.id)}>
          삭제하기
        </StButton>