컴포넌트 꾸미기 (Styled Component)

여태까지 css를 넣기위해 css-in-JS방식을 사용했다.
css-in-JS란 자바스크립트 코드로 CSS코드를 작성하여 컴포넌트를 꾸미는 방식이다.
컴포넌트를 만들고 컴포넌트를 꾸미기위해 css파일을 만들고 import하고...
tag마다 className을 넣어 CSS코드를 반복 작성해야하는 불편함이 있었다.

이번에는 styled-component 패키지를 사용하여 CSS-in0JS방식으로 컴포넌트를 꾸밀수 있게 할 것이다.

 

VScode 플러그인, 패키지 설치

yarn add styled-components

 

styled-components 사용하기

// src/App.js

import React from "react";
// styled-components에서 styled 라는 키워드를 import 합니다.
import styled from "styled-components";

// styled키워드를 사용해서 styled-components 방식대로 컴포넌트를 만듭니다. 
const StBox = styled.div`
	// 그리고 이 안에 스타일 코드를 작성합니다. 스타일 코드는 우리가 알고 있는 css와 동일합니다.
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`;

const App = () => {
	// 그리고 우리가 만든 styled-components를 JSX에서 html 태그를 사용하듯이 사용합니다.
  return <StBox>박스</StBox>;
};

export default App;

위처럼 styled를 사용하여 태그값을 설정하고

const StBox = styled.div``	//div태그
const StBox = styled.span``	//span태그
const StBox = styled.button``	//버튼태그

백틱 안에 CSS스타일 값을 넣어 스타일을 입력할 수 있습니다.

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`

 

스타일 코드를 작성 할 때 if, switch, 삼항연산자를 활용하여 className에서는 까다로운 부분을 styled-component를 이용하여 간편하게 설정할 수 있습니다.

 

위와같이 특정 색깔을 기준으로 컴포넌트 내 텍스트와 border색깔을 바꾸고 싶을 때 조건부 스타일링을 사용합니다.

styled-component도 말 그대로 컴포넌트이기 때문에, box들에게 props를 통해 border color에 대한 정보를 전달할 수 있습니다.

 

// 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;

App 컴포넌트에서 StBox들에게 borderColor = red, green, blue로 props를 내려줍니다.

그럼 StBox라는 styled-component는 props를 받아 border에 사용한 것을 볼 수 있습니다.

props를 받아 사용할 때는 ${}(템플릿 리터럴)로 열어 안에 화살표함수를 넣어 사용합니다.

화살표 함수 안에는 props를 특정 값을 반환해야하는데,

위에서 사용한 방식을 말하면, props안의 borderColor을 return한다는 뜻 입니다.

${(props) => {return props.borderColor}}

 

Switch와 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;

boxList로 색들을 배열로 저장하고, getBoxName함수로 인자값에따라 반환하는 값을 설정합니다.

그리고 App컴포넌트에서 StBox 컴포넌트에 props를 내려주는데, borderColor를 boxList의 각인자로 내려줍니다.

그리고 출력되는 글자는 getBoxName함수에서 해당 인자에 맞춰 반환되는 값을 사이에 출력하도록 합니다.

이렇게 boxList에대한 값들이 모두 map메소드를 지나며 red, green, blue에 대한 컴포넌트들이 출력됩니다.