class에 선업없이 컴포넌트에 css를 직접 장착
css in js
className의 오염을 방지!(클래스 이름이 겹칠일이 줄어든다는뜻)
컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생기는데
- class 만들어놓은걸 까먹고 중복해서 또 만들거나
- 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나
- CSS 파일이 너무 길어져서 수정이 어렵거나
이런 경우가 있음.
해결책 : styled-components라는 인기 라이브러리를 설치
import styled from 'styled-components' 상단에 일단 작성
3steps
1. div박스를 하나 만들고 싶으면 저렇게 styled.div 라는걸 사용.
p태그 만들려면 styled.p 이런시긍로 사용.
-
그리고 그 오른쪽에 `` backtick 기호를 이용해서 기본 스타일을 다 넣어주시면 됩니다.
-
그리고 그걸 변수로 저장하면 컴포넌트가 완성됩니다. 원하는 곳에 사용하시면 됩니다.
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 막짜도 된다는겁니다.
-
스타일 넣을 때 다른 파일이랑 컴포넌트 명이 겹쳐도 전혀 CSS적으로 문제가 생기지 않음.
-
그리고 나중에 컴포넌트 스타일 수정을 원할 때 CSS가 아니라 컴포넌트 파일을 찾으면 되니 수정도 편리하고요.
개인적으로 내가 CSS 아키텍쳐 잘하면 CSS + SASS로 작성한 뒤 원하는 css 파일만 import 쓰는게 전체적 스타일 관리하는데 편리할 것이고
CSS 초보자라면 styled-components 라이브러리 이용하는게 관리하기 편할 수 있음
그리고 사내에 퍼블리셔라든지 CSS 디자인 담당하는 사람이 있으면 이런 라이브러리 안쓰는게 좋음(소통의 문제)
라이브러리가 리액트 숙련도를 요구하기 때문에 협업이 어려울 수 있습니다.
