CSS-in-JS 컴포넌트 꾸미기

 

• 명령어  ( 스타일 컴포넌트 패키지)

yarn add styled-component

 

• 플러그인 설치 (스타일 컴포넌트 플러그인) - vscode에서 style 코드 편하게 작성할 수 있도록 해준다.

vscode-styled-component

---

 

 

스타일 컴포넌트 사용법

꾸미고자하는 컴포넌트를 스타일 컴포넌트 방식으로 먼저 만든다.

그리고 그안에 스타일 코드를 작성한다.

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

App.js 에서 스타일드를 임포트한다.

StBox라는 스타일 컴포넌트를 생성한다. (컴포넌트 생성은 App 위로 만듦)

return 아래도 JSX에서 HTML사용하듯이 스타일드컴포넌트 네임으로 태그를 지정한다.

 

const 컴포넌트네임 = styled.div`

`;

div자리에는 내가 원하는 태그를 넣어 만들 수 있다.

예를 들어서 h1태그로 하고있으면 styled.h1 이렇게 지정해 주면 된다.

 

 

스타일드 컴포넌트는 조건부 스타일링을 할 수 있다.

조건부 스타일링은 아래 코드를 참고하면 된다.

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

먼저 StBox 태그가 3개 있고 각각 빨간박스, 초록박스, 파랑박스가 있다.

그리고 각 이름에 맞춰 테두리색을 주려고 한다.

그랬을때, App 컴포넌트에 있는 각각 StBox에 테두리컬러를 지정해서 적어준다.

  그리고 다시 styled 컴포넌트로 돌아가서 스타일을 지정해준다.

const StBox = styled.div`
	border: 1px solid red;
`;

 

일반적으로 위 코드처럼 스타일을 지정해 줬다면

조건부 스타일링은 템플릿리터럴을 써서 사용하면 된다.

const StBox = styled.div`
	border: 1px solid ${(props) => props.borderColor};
`;

이렇게 ${} 로 적용시켜주면 된다.

부모컴포넌트에서 porps를 받아서 borderColor를 각각의 조건에 맞게 설정하도록 화살표 함수를 적용했다.

 

> 그럼 이제 map를 이용해서 리팩토링을 해본다.

// 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 boxList = ["red", "green", "blue"];

  // 색을 넣으면, 이름을 반환해주는 함수를 만듭니다.
  const getBoxName = (color) => {
    switch (color) {
      case "red":
        return "빨간 박스";
      case "green":
        return "초록 박스";
      case "blue":
        return "파란 박스";
      default:
        return "검정 박스";
    }
  };

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;

우선 색깔별로 지정을 해줘야하니까 boxList라는 이름으로 배열을 만들어준다. ["red", "green", "blue"]

그리고 화살표 함수를 이용, Switch문을 활용해서 코드를 짠다.

// 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 boxList = ["red", "green", "blue"];

  // 색을 넣으면, 이름을 반환해주는 함수를 만듭니다.
  const getBoxName = (color) => {
    switch (color) {
      case "red":
        return "빨간 박스";
      case "green":
        return "초록 박스";
      case "blue":
        return "파란 박스";
      default:
        return "검정 박스";
    }
  };

const App = () => {
  return (
    <div>
			{/* 2. 그리고 위에서 만든 styled-components를 사용했습니다. */}
			{/* 3. 그리고 props를 통해 borderColor라는 값을 전달했습니다. */}
      {boxList.map((box) => (
      <StBox borderColor = {box}> {getBoxName(box)} </StBox>);
      ))};
    </div>
  );
};

export default App;

 

* 정리를 하자면,

boxList를 선언해서 배열로 "red", "green", "blue"로 정하고 

App 컴포넌트에서 map 함수를 이용해서 boxList가 돌도록 설정한다.

boxList를 선언한 아래에 getBoxName이라는 컴포넌트를 생성하고

그 안에 switch문을 이용하여 배열속 요소가 돌때마다 조건에 맞게 나오도록 설정해 준다.

지금 위 코드의 경우 "red"값이 들어오면 "빨간박스"라는 이름이, "green" 값이 들어오면 "초록박스"라는 이름이 들어오도록 했다.

그리고 다시 App 컴포넌트로 돌아와서 이름이 들어갈 수 있도록 { }를 사용해 case에 조건에 따라 리턴값이 들어오도록 한다.

 

 

 

 

 

* 항해99 신청하실 분들은 참고해주세요!!

항해99 신청하실 분들 중 추천인이 필요하신 분들은 댓글 달아주세요 :)