React Project8. styled-components를 이용한 class없는 CSS스타일링

7702 단어 ReactReact

class에 선업없이 컴포넌트에 css를 직접 장착

css in js

className의 오염을 방지!(클래스 이름이 겹칠일이 줄어든다는뜻)

컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생기는데

  1. class 만들어놓은걸 까먹고 중복해서 또 만들거나
  2. 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나
  3. CSS 파일이 너무 길어져서 수정이 어렵거나
    이런 경우가 있음.

해결책 : styled-components라는 인기 라이브러리를 설치

import styled from 'styled-components' 상단에 일단 작성

3steps
1. div박스를 하나 만들고 싶으면 저렇게 styled.div 라는걸 사용.
p태그 만들려면 styled.p 이런시긍로 사용.

  1. 그리고 그 오른쪽에 `` backtick 기호를 이용해서 기본 스타일을 다 넣어주시면 됩니다.

  2. 그리고 그걸 변수로 저장하면 컴포넌트가 완성됩니다. 원하는 곳에 사용하시면 됩니다.

import React, { useState } from 'react';
import styled from 'styled-components';

let 박스 = styled.div`
  padding : 20px;
`;
let 제목 = styled.h4`
  font-size : 25px;
`;

function Detail(){
  return (
    <div>
      <HTML 많은 곳/>
      <박스>
        <제목>안녕하세요</제목>
      </박스>
    </div>
  )
}

추가 문법 : props로 스타일링하기

여러가지 사용법 중 가장 유용한건 바로 props로 스타일링하는 방법입니다.

여러가지 비슷한 UI가 필요한 경우 어쩌죠?

예를 들면 위에서 만든 제목 (h4) 요소가 여러가지 색깔 버전으로 필요할 때 어떻게 하냐는 것이죠.

import React, { useState } from 'react';
import styled from 'styled-components';

let 박스 = styled.div`
  padding : 20px;
`;
let 제목 = styled.h4` // 백틱 기호
  font-size : 25px;
  color : ${ props => props.색상 };
// ${}는 ``(백틱기호) 안에 쓸수 있는 ES6문법. 문자 중간중간 함수나 변수를 집어넣고 싶을 때 사용.
//  콜백함수로 넣어야함
`;

function Detail(){
  return (
    <div>
      <HTML 많은 곳/>
      <박스>
        <제목 색상="blue">안녕하세요1</제목>
        <제목 색상={'red'}>안녕하세요2</제목>
      </박스>
    </div>
  )
}

참고 : 리액트에서 props 전송하실 땐 두가지 방법이 있습니다.

<제목 색상="blue"></제목>
<제목 색상={'red'}></제목>

그냥 일반 텍스트를 전달하고 싶으면 “” 따옴표 안에 쓰고,

변수나 자료형을 담고 싶으면 {} 중괄호 안에 쓰면 됨

하지만 이런 기능을 CSS로 이걸 구현할 수 없는 것도 아니기 때문에 (class 하나 더 만들면됨)

옛날 개발자들은 CSS가 편함.

굳이 자바스크립트 코드 안에서 스타일을 관리하고 싶진 않음.

나중에 애니메이션 class가 필요해지면 또 문제기도 하고

스타일이 많아지면 다른 파일로 빼야하는데 그게 CSS 파일 쓰는거랑 뭔 차인지 모르겠고

하지만 styled-component의 극강의 장점은 CSS 막짜도 된다는겁니다.

  1. 스타일 넣을 때 다른 파일이랑 컴포넌트 명이 겹쳐도 전혀 CSS적으로 문제가 생기지 않음.

  2. 그리고 나중에 컴포넌트 스타일 수정을 원할 때 CSS가 아니라 컴포넌트 파일을 찾으면 되니 수정도 편리하고요.

개인적으로 내가 CSS 아키텍쳐 잘하면 CSS + SASS로 작성한 뒤 원하는 css 파일만 import 쓰는게 전체적 스타일 관리하는데 편리할 것이고

CSS 초보자라면 styled-components 라이브러리 이용하는게 관리하기 편할 수 있음

그리고 사내에 퍼블리셔라든지 CSS 디자인 담당하는 사람이 있으면 이런 라이브러리 안쓰는게 좋음(소통의 문제)

라이브러리가 리액트 숙련도를 요구하기 때문에 협업이 어려울 수 있습니다.

dowhile, exception, dynamicQuery
laydate 시간 컨트롤 바 인 딩 이벤트, 날 짜 를 선택 한 후 이벤트 호출

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage