쇼핑몰 프로젝트(styled-components)

코딩애플 님의 강의를 바탕으로한 글입니다:)

styled-components

컴포넌트가 많을 경우 스타일링을 하는데 불편함이 생긴다.
class를 중복해서 만들거나 CSS 파일이 길어서 수정이 어려운 경우가 많을 것이다. (개공감)

따라서 컴포넌트를 제작할떄 스타일을 바로 입힐 수 있다. 즉, 컴포넌트 안에 CSS를 장착하는 것으로 CSS in JS 라고도 한다.

설치

yarn add styled-components 또는 npm install styled-components

그리고 원하는 컴포넌트 위에

import styled from 'styled-components'

다음과 같이 변수를 만들고 그 변수를 컴포넌트와 같이 만들어 사용하면 된다.
그냥 봐서는 간단해보이지만, 클래스명을 태그마다 주는 것과 변수명 하나씩 만들어서 컴포넌트화 시켜주는 것 둘다 비슷한 노동인 것 같다. 하지만 앞서 말했듯이 중복 실수 같은 문제는 컴포넌트를 만들어줌으로써 배제할 수 있을거 같다.

props로 스타일링하기

이건 생각보다 유용한 것 같다. 만약 내가 비슷한 형태의 제목을 여러개 줄때 색깔만 바꾸고 싶을 때가 있다. 그럼 나는 항상 전체형식을 다 복사붙여넣기하고 color부분만 바꿔주었다. 이러면 코드가 길어질 수 밖에 없는데, props를 이용해 중복을 최소화할 수 있다.(재활용)

• ${} 이라는 문법은 문자를 생성하는 `` 백틱 기호안에서 쓸 수 있는 ES6 문법인데, 문자 중간중간 함수나 변수를 집어넣고 싶을 때 사용.
• props.색상이라는 props 변수를 넣어준다. 그냥 ${ props.색상 }라고 넣으면 안되고 저렇게 콜백함수로 넣어야 한다.
  
  이를 통해 색상이라는 함수를 사용할 수 있고 일반 텍스트를 전달하고 싶으면 "" 따옴표 안에 쓰면 되고 변수나 자료형을 담고 싶으면 {} 중괄호 안에 쓰면 된다.

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