CSS in JS: 자바스크립트로 CSS 작성하는 방법

Louis·2023년 11월 7일

안녕하세요! 저는 요즘 React에 대해 공부를 하고 있는데요 오늘은 신기하게도
자바스크립트 안에서 CSS를 작성하는 방법에 대해 공부를 했는데 벨로그에 다뤄보면 좋을 것 같아서 이렇게 찾아왔습니다..!

아시는 분들이 더 많겠지만 저는 코린이기 때문에 이런게 신기하고 그러네요..ㅎ

시작하기 전에 확장 프로그램 하나 설치 합시다!

vscode 프로그램 안에서 해당 확장프로그램을 설치해줍니다

그 후 한 번 다시 프로그램을 껐다가 다시 실행하고

App.js 파일 상단에

import styled from "styled-components";

해당 코드를 작성해서 설치 했던 확장프로그램을 실행해줍니다 : )

그러면 본격적인 설명 시작하도록 하겠습니다

기존에는 어떻게 했죠?

기본적으로 CSS를 이용해서 태그들을 꾸미거나 위지 조절 등을 해주었는데요

예를 들어

<div class = 'StBox'>
  <div class = 'red'>빨간 박스</div>
  <div class = 'blue'>파란 박스</div>
  <div class = 'green'>초록 박스</div>
  <div class = 'black'>검정 박스</div>
</div>

이러한 태그가 있으면

.StBox {
	display: flex;
}

.StBox .red {
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

.StBox .blue {
	width: 100px;
	height: 100px;
	border: 1px solid blue;
}

.StBox .green {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

.StBox .black {
	width: 100px;
	height: 100px;
	border: 1px solid black;
}

이런식으로 여러 코드를 적어주었습니다 width, height 의 값은 갖지만 border의 색상이 서로 다르기 때문에 여러 코드를 적어주었는데요

자바스크립트를 이용한다면 길게 코드를 적지 않아도 됩니다! 제가 배워왔습니다!

그래서 어떻게 하라는거죠?

제가 알려드리겠습니다😉

설명을 위해 위의 html 코드를 다시 가져오겠습니다

<div class = 'StBox'>
  <div class = 'red'>빨간 박스</div>
  <div class = 'blue'>파란 박스</div>
  <div class = 'green'>초록 박스</div>
  <div class = 'green'>검정 박스</div>
</div>

이런 코드가 있었죠

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

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

일단은 박스의 색상들을 const로 변수 선언을 해줍니다
이유는 이후에 .map 을 활용해서 해당 색상들을 모두 코드에 적용해주기 위함이죠!

const StBox = styled.div`` 이 변수는 공통적으로 적용되는 효과와 색상에 따라 선 색상도 변경하기 위해서 위의 변수도 선언해줍니다

그리고 그 밑에

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

해당 코드를 작성 합니다 해당 코드를 작성하는 이유는 각각의 <div> 태그 안에 박스 이름을 추가 해주기 위함입니다

그 다음 드디어 함수가 나옵니다

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