CSS in JS

심채운·2022년 7월 17일
0

Style

목록 보기
1/2

배운것

CSS-in-JS

css-in-js방식이란,단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식이다.
styled-components는 우리가 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지이다.

패키지란, React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 써드파티프로그램이다. 패키지들은 누군가에 의해 만들어진 겅스로 npm에 모여있다. 우리는 사용하고자 하는 패키지를 npm install 또는 yarn add를 통해 설치해서 사용이 가능하다.
터미널에 yarn add styled-components 명령어 입력 후 설치

styled. 뒤에는 html의 태그가 온다. 아래 처럼 내가 원하는 html 태그를 사용해서 styled-components를 만들 수 있다.

div ➡️ styled.div

span ➡️ styled.span

button ➡️ styled.button

조건부 스타일링이란?

CSS-in-js 방식의 강점이 바로 스타일 코드를 JS코드 작성하듯이 스타일 코드를 작성할 수 있다는 점이다.
styled-components도 말 그대로 컴포넌트 이다. 즉, 우리는 box들에게 prosp를 통해서 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;

함수의 인자에서 prosp를 받아오고, props안에는 부모 컴포넌트에서 보낸 borderColor가 있습니다. 그것을 return 합니다. ${(props)⇒{ return props.borderColor }} 이렇게 리턴하면 (props)⇒{ return props.borderColor } 의 값이 === 'red' 가 되고 결국 우리 눈에는 복잡해보이지만, 브라우저는 border: 1px solid red 라는 코드로 인식하여 스타일링이 되는 것

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 App = () => {
	// 박스의 색을 배열에 담습니다.
  const boxList = ["red", "green", "blue"];

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

  return (
    <StContainer>
			{/* map을 이용해서 StBox를 반복하여 화면에 그립니다. */}
      {boxList.map((box) => (
        <StBox borderColor={box}>{getBoxName(box)}</StBox>
      ))}
    </StContainer>
  );
};

export default App;

styled-components의 globalstyles란?
하지만 규모가 있는 웹 애플리케이션을 개발할 때는 개별 컴포넌트가 아닌 모든 컴포넌트에 동일한 스타일을 적용하는 편이 유리한 경우가 있습니다. 대표적인 예로 font-family CSS 속성을 들 수 있는데, 여러 컴포넌트에 걸쳐 통일된 글꼴을 사용하고 싶은 경우가 대부분이기 때문입니다. 애플리케이션 레벨스타일을 지원하기 위해 Styled Components는 createGlobalStyle()라는 함수를 제공한다.

// GlobalStyle.jsx

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after {
    box-sizing: border-box;
  }

  body {
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
  }
  h2, p {
      margin: 0;
    }

    h2 {
      font-size: 1.5rem;
    }

    p {
      font-size: 1rem;
    }
`;

export default GlobalStyle;

이렇게 createGlobalStyle() 함수로 생성한 전역 스타일 컴포넌트를 애플리케이션의 최상위 컴포넌트에 추가해주면 하위 모든 컴포넌트에 해당 스타일이 일괄 적용됩니다. 빈번하게 사용되는 엘리먼트에 대해서는 애플리케이션 레벨에서 기본 스타일을 정의해주면 편리한 경우가 있습니다. 예를 들어, <h2><p> 엘리먼트에 대한 전역 스타일

네스팅(nesting)이란

부모 루틴 안에서 자식 루틴을 넣어서 짜는 것(SCSS라고 보면 될듯)
네스팅을 구성하면 다른 컴포넌트에서 사용한 class명이 겹치지 않고, 부모 자식 관계로 나타내기 때문에 소스를 수정하거나 속성들을 적용시킬 때 더욱 편리하다.

Css reset이란? 왜 필요한가?

브라우저의 스타일을 초기화하기 위해 사용하는 파일이다.
필요한 가장 큰 이유는 크로스브라우징을 위해서입니다. 브라우저마다 HTML 시맨틱 태그에 대한 기본값이 다르므로 그 차이를 없애는 데 필요합니다.

크로스브라우징은 웹 표준에서 중요시하는 기술로 크롬, 사파리, 파이어폭스 등의 브라우저에서 웹 사이트를 접속했을 때 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 제작하는 것

profile
불가능, 그것은 사실이 아니라 하나의 의견일 뿐이다. - 무하마드 알리

0개의 댓글