styled-component 를 배우기전에 ES6의 템플릿 리터럴 문법을 알고넘어가려 합니다.
템플릿 리터럴
const hello = '안녕하세요.'
const stringAdd = `${hello}+김태형입니다.`
console.log(stringAdd);//안녕하세요. 김태형입니다.위와같이 사용이 가능한데, 객체나 함수를 출력하면 어떻게될까요?
const obj = {
h:"안녕하세요",
n:"김태형입니다."
}
const fn = () => { return true }
const printObj = `${obj}`
const printFn = `${fn}`
console.log(printObj);//[object Object]
console.log(printFn);//() => { return true }const name = "김태형";
const age = 30;
const speakeMyInfo = (string, ...value) =>{
console.log(string); // ['안녕하세요 제 이름은','이고요. 나이는','입니다']
console.log(value); // ['김태형',30]
}
speakeMyInfo`안녕하세요 제 이름은${name}이고요. 나이는${age}입니다.`
//함수의 파라미터가 하나라면 해당 인자가 모든 값을 취득합니다.
/*
speakeMyInfo 함수의 첫번째 인자는 템플릿 리터럴의 모든 문자열을 가진 배열이 됩니다.
두번째 인자는 모든 값을 가진 배열이 됩니다.
나눠지는 기준은 값을 기준으로 끊어진 문자열만큼 나눠지네요
*/
위 문법을 이해하셨다면 이제 리액트 스타일링의 꽃인 Css-in-Js에 관해 포스팅하려고합니다.
자바스크립트 파일에 Css를 작성하는 방식이고, 다양한 라이브러리들이 있습니다. 그중에 styled-component 라는 라이브러리를 알아보려합니다.
styled-component 를 활용하면 js 파일에 스타일까지 작성할 수 있어서 편리합니다.
styled-component 라이브러리를 다운받고 사용해야합니다.
npm install styled-component컴포넌트에서 import 후 사용합니다.
import styled from 'styled-componets'Syntax
const 컴포넌트이름 = styled.태그`
...code
`styled-componenet 뜻을 살펴보자면 스타일된 컴포넌트 라는 뜻인데요. 말그대로 컴포넌트를 만들어냅니다.
주의사항 : styled-component 의 네이밍은 반드시 첫글자가 대문자여야 합니다.
- 컴포넌트이름으로 컴포넌트가 만들어지게된다.
- 태그자리에 태그명을 사용하면 사용된 태그명으로 만들어집니다.
- 컴포넌트 이기에 props 또한 사용가능합니다.
아래 내용을 살펴볼까요?
//1. 기본 타입
const WrapBox = styled.div'
//props 사용가능
background: ${ props => props.color || 'blue' };
//& 기호를 이용해 this처럼 자신을 선택할 수 있습니다.
&:hover{
color:white;
}
'
//2. 태그 타입을 지정해주는 방법
const StyledInput = styled('input')`
...code
`
//3. 컴포넌트를 직접 지정하는 방법 ----------------------------
const StyledSample = styled(Sample)`
...code
`
const Sample = ({className}) => {
return <div className={className}>Sample입니다.</div>
}
//---------------------------------------------------
return(
<>
<WrapBox color={'red'}><WrapBox>
<StyledInput type='text'></StyledInput>
<Sample></Sample>
</>
)3번은 컴포넌트를 styled의 파라미터로 넣었습니다. 이런 경우에는 해당 컴포넌트에 className props를 최상위 DOM의 className 값으로 설정하는 작업이 내부적으로 되어 있어야 합니다.
조건부 스타일링
예제
/*CSS 함수를 이용하여 props가 있다면 달라지는 스타일링입니다.
여러줄의 스타일을 사용할 수 있습니다.
*/
const Box = styled.div`
border: 1px solid red;
${props => props.TorF && css`
border: 1px solid blue;
color: red;
font-size:20px
`}
`
//props에 값을 전달하여 그 값으로 스타일링을 합니다.
const P = styled.p`
border: ${(props) => (props.border ? props.border; : '1px solid black')};
`
<Box TorF={true}></Box>
<p border={'1px solid red'}></p>media query ( 반응형 디자인 )
//미디어 쿼리 사용은 일반 CSS와 동일합니다.
const Box = styled.div`
@media (max-width 1024){
...code
}
`
Front End