오늘은 React(Next.js)와 CSS in JS, 그 중에서 CSS in JS를 중점으로 배웠습니다

처음에는 어려울 줄 알고 많이 걱정을 했었는데 막상 배우니까 엄청 편리합니다!

React, CSS in JS를 배우기 전에는

Web 페이지를 만든다고 하면 Web의 구조를 담당하는 HTML, 디자인을 담당하는 CSS, 기능을 담당하는 JavaScript가 필요합니다.

하지만 React를 사용하면 JavaScript안에서 HTMl을 사용을 할 수 있습니다.

CSS in JS를 사용하면 이름 그대로 JavaScript에서 CSS를 사용을 하는 것 입니다!

CSS in JS 방식

기존에 HTML, CSS를 사용하던 방식이 다음과 같은 코드라면

html

	<div class="header>
    		<span>Header 입니다.</span>
  	</div>

css

	.header{
    		width: 100px;
                height: 100px;
                background-color: red;
      	 }
        .header span{
    		color: blue;
      	 }

CSS in JS 방식은

javascript

  <Header>
    <span>Header 입니다.</span>
  </Header>
...
  const Header = styled.div`
	width: 100px;
        height: 100px;
        background-color: red;
	& span {
		color: blue;
	}

위 처럼 JavaScript의 상수(const)안에 CSS를 지정하고

지정한 상수명을 태그 이름으로 사용을 할 수 있습니다!

CSS in JS를 사용하면 기존에 CSS in JS 방식으로 만든 태그들을 재사용을 할 수 있어 코드의 재사용성이 증가합니다!

또한, className을 사용을 하지 않고, 태그의 이름을 지정을 하고, 의미를 부여할 수 있어서, 코드의 가독성이 증가하고 더욱 간결한 코드를 만들 수 있습니다!

Jaenk의 한마디

그동안 HTML, CSS작업을 하면서 아무리 class명을 지정을 해줘도 나중에 다시 보면 이게 어떤 역할을 하고, 어디에 위치한 태그인지 헷갈리는 경우가 많았는데

CSS in JS 방식을 사용을 해보니까 전보다 쉽게 각 태그의 역할이나 위치를 한 눈에 보기 쉬운 것 같아요!

많이 이용을 할 것 같습니다 ㅎㅎ