React에 css 적용하는방법

react에서 css를 적용하는 방법에한 포스팅이다.

css import로 사용
css파일을 임포트하여 사용한다. js파일 상단에서 import구문을 적어서 연결시킨다. src폴더를 기준으로 다음과 같이 불러온후 클래스를 연결시켜 사용

import './App.css'

scss import 사용
sass파일을 연결하여 사용한다. 마찬가지로 js파일 상단에서 import를 적어 연결시킨다.

import "./scss_ex.scss";

다만 그냥 사용할수는 없고 패키지를 설치해야하는데

yarn add node-sass@4.14.1 open-color sass-loader classnames

node-sass 패키지를 설치해야하고 그와 관련된 의존성 패키지들을 같이 설치해줘야하므로 위에 패키지들을 함께 설치하여 사용하면 gulp를 사용할때와 마찬가지로 sass사용이 가능하다.

styled-components

yarn add styled-components

CSS-in-JS 라이브러리 중 하나로 패키지를 설치하여 사용한다. 자바스크립트 내에서 css혹은 sass구문으로 사용가능하며 바로 컴포넌트에 적용가능한 방식이다.

import styled from 'styled-componets'


render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

자바스크립트 내부에 변수로 저장하여 css작성이 가능하며 css는 백틱 안에 작성하여 변수명 자체를 컴포넌트로 사용가능하다.

또한 props를 전달해 활용가능하며 state 값에따라 다른 색상을 보여주는 예제도 가능하다. sass구문이 가능하며 네스팅문법이 가능하나, mixin과 include는 아직 적용이 안되는것으로 보인다.

import React from 'react';
import styled from 'styled-components';

function App() {
  return (
    <div className="App">
      {/* props로 bgColor를 전달! */}
      <MyStyled bgColor={"red"}>hello React!</MyStyled>
    </div>
  );
}

// scss처럼 자기 자신을 지칭할 때 &를 쓸 수 있다!
const MyStyled = styled.div`
  width: 50vw;
  min-height: 150px;
  padding: 10px;
  border-radius: 15px;
  color: #fff;
  &:hover{
    background-color: #ddd;
  }
  background-color: ${(props) => (props.bgColor ? "red" : "purple")};
`;
export default App;

현재로서는 state값에따라 시각적으로 변화가 필요한 컴포넌트표현에는 styled-components를 사용하고 기본 레이아웃은 sass파일로 따로 선언하여 혼합 사용하는게 가장 좋은 css선언법으로 보인다.