React - Styled Components

Styled-Components란?

styled-components는 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지이다.

CSS-in-JS 방식이란, 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식

Styled-Components 사용

(1) VScode 플러그인 설치

VScode에서 vscode-styled-components라는 플러그인을 설치해준다.

(2) yarn에서 설치

yarn add styled-components

사용법

const StBox = styled.div``;

styled 뒤에는 html 태그가 온다. 원하는 태그를 사용해 styled-components를 만들 수 있다.
그리고 백틱 안에 스타일을 넣어주는 형식으로 사용한다.

조건부 스타일링

만약 스타일 코드에서 if문을 사용할 수 있다면? switch문을 사용할 수 있다면? 삼항연산자를 사용할 수 있다면? 이런 궁금증을 styled-components로 해결할 수 있다.

const StBox = styled.div`
  border: 1px solid ${(props) => props.borderColor};
`;
const App = () => {
  return (
    <div>
      <StBox borderColor="red">빨간 박스</StBox>
      <StBox borderColor="green">초록 박스</StBox>
      <StBox borderColor="blue">파랑 박스</StBox>
    </div>
  );
};

styled-components 백틱 안에 스타일은 ; 로 마무리한다.

응용🔥 Switch문과 map을 활용한 리팩토링

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>
        	{boxList.map((box)=>{
            	<StBox borderColor = {box}>{getBoxName(box)}</StBox>
            })}
        </StContainer>
    };
};