styled-components

component가 많아지면 css 작성시에 고민이 많아진다. 예를 들면, 실수로 class를 중복으로 이름을 만들거나 한다. 그래서 class 선언없이 컴포넌트에 css를 직접 장착하는 것을 말한다. css in js라고 한다. 하는 방법은 터미널에

npm install styled-components
//혹은 yarn add styled-components

를 입력해준다. 사용법은 먼저, 해당 js상단에

import styled from 'styled-components';

import를 해온다. 그 다음에 메인 function밖 상단에

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

function Detail() {

	return(
    	<박스>
        	<제목>상세페이지</제목>
        </박스>
    )
}

이런 식으로, 미리 css를 입혀놓은 컴포넌트를 만들어주고, 만든 컴포넌트 이름으로 태그를 사용할 수 있다.

그러면 위처럼, padding이 20px인 div박스와 font-size가 25px인 h4태그가 생긴다.

 

추가로 만약, 색깔만 다른 제목이 여러개 필요하다면 props를 사용할 수 있다.

let 제목 = styled.h4`
  font-size : 25px;
  color : ${ props => props.색상 }
`;

이렇게 쓰고 사용시

<제목 색상={'red'}>상세페이지</제목> //색상="red" 이렇게 {}빼고 써도 가능

이렇게 쓰면 red가 된다. 

 

하지만 css를 모듈화해서 쓰면 이런 문제도 해결 가능하다.