styled-components
❗ 컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생김
- class 만들어놓은걸 까먹고 중복해서 또 만들거나
- 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나
- CSS 파일이 너무 길어져서 수정이 어렵거나
npm install styled-componentsimport styled from 'styled-components'
〰 기본적인 사용법
import React, { useState } from 'react'; import styled from 'styled-components'; let 박스 = styled.div` padding : 20px; `; function Detail(){ return ( <div> <HTML 많은 곳/> <박스></박스> </div> ) }
〰 props로 스타일링하기
let 제목 = styled.h4` font-size : 25px; color : ${ props => props.색상 }; `;function Detail(){ return ( <div> <HTML 많은 곳/> <박스> <제목 색상="blue">안녕하세요1</제목> <제목 색상={'red'}>안녕하세요2</제목> </박스> </div> ) }
리액트에서 props 전송하실 땐 두가지 방법이 있습니다.
<제목 색상="blue"></제목> <제목 색상={'red'}></제목>
❗ 그냥 일반 텍스트를 전달하고 싶으면 "" 따옴표 안에 쓰시면 되고
❗ 변수나 자료형을 담고 싶으면 {} 중괄호 안에 쓰시면 됩니다.
기본 회원