styled component 작성법 장점 자바스크립트 메소드 사용

styled components란 ?

기본의 css는 태그의 인라인으로 하거나, css파일을 따로 만들어서 구현을 했었는데js파일에서 styledcomponent를 이용하는 방법도 있다. 

 

styledcomponent는 리액트의 고유 기능은 아니고 package로 다운을 받아야하는데 적용 방법은

 

1.vscode 확장에서 vscode- styled-components 를 설치해준다. 

2. 터미널을 열어서 'yarn add styled-components'를 입력해 설치해준다. 

3. package.json에서 styled-components 가 추가된 걸 확인한다

4. js, jsx파일에 import styled from 'styled-components'; 해준다. 

 

이렇게 하면 세팅이 끝난다. 

styled components 작성법

스타일을 변수로 선언해 태그를 변수이름으로 넣기. 

const StBox = styled.div`
  width: 100px;
  height: 100px;
`

변수 선언부 = styled.태그 `적용할 스타일` 이다. ``은 백틱이다. ''작음 따옴표랑 헷갈리면 안된다.  js파일에서 inline으로 css를 줄 경우 javascript문법으로 width : '100px' 이렇게 썼었는데  styledcomponent 에서는 ``으로 감싸주면서 css문법으로 작성하면 된다.  

그런 다음 

<StBox>hello</StBox>

이런 식으로 태그로 변수이름을 넣어주면 css가 적용이 된다!

 

styled components의 장점

조건부 스타일링이 가능하다. 또한 js in css 라는 것이 css를 자바스크립트적으로 쓸 수 있다는 것인데 본래의 css는 if문, 상항연산자 등의 조건들이 불가능 했지만 styledcomponent는 가능하다는 점이다. 

 

조건부 스타일은 같은 스타일을 받는 태그들이 있다고 가정하면 태그들마다 하나씩 조건을 다르게 주고 싶을 때 props를 전달해주어 각 태그마다 조건에 맞게 스타일이 되는 것인데 말로 설명하니 이상하다. 

    <StBox>hello</StBox>  //애는 핑크로
    <StBox>hello</StBox>  //애는 파랑으로
    <StBox>hello</StBox>  //애는 노랑으로

이렇게 같은 스타일 태그를 사용하는 한 조건을 다르게 하고 싶을 때 원래라면 class를 따로 줘서 해줘야했다면 styledcomponent는  이런식으로 표현이 가능하다. 

const StBox = styled.div`
  width: 100px;
  height: 100px;
  background-color: ${(props)=>props.backgroundColor}; //props를 받아주기 백틱 안이라서 ${}로 쓰는 것
  margin: 20px;
`
function App() {
  return (
    <>
    <StBox backgroundColor ='pink'>hello</StBox>  //다르게 줄 조건을 js문법으로 작성하기
    <StBox backgroundColor ='skyblue'>hello</StBox>  
    <StBox backgroundColor ='yellow'>hello</StBox> 
 
    </>
     );
}

props를 넘겨받는 게 모르겠다면 

2023.10.31 - [React] - React props

React props

backgroundColor ='색'을 props로 주고 ${(props)=>props.backgroundColor} 이렇게 받아줬다. 

그러면  각 태그마다 배경색이 달라지는 것을 확인할 수 있다!

 

styled components의 자바스크립트 메소드 사용

그렇다면 위에서  styledcomponent는 map, if등이 사용가능하다고 했는데 이걸 map을 사용해서 요 박스들을 새롭게 나열해보자

const boxlist = ['pink', 'skyblue', 'yellow']

배열을 map을 사용해서  <StBox backgroundColor = ???>???</StBox>으로 돌려보자!

{boxlist.map((item)=>{
        return <StBox backgroundColor={item}>???</StBox>
        })}

boxlist의 각각의 요소를 인자에 담아서 넣어줬는데 이름은 어떻게 해야할까? switch문을 사용해서 색이 pink일때, skyblue일때 yellow일 때의 케이스 별로 해주면 좋지 않을까?

const boxname = function (color) {  //boxName(인자)로 받은 컬러가
  switch (color) {
    case 'pink':  //pink면
      return "핑크박스"; //이걸 반환하고
    case 'skyblue':  //blue면
      return "파랑박스"; //이걸 반환하고
    case 'yellow': //yellow면 
      return "노랑박스";//이걸 반환하고
    default :  //없으면
      return "검정박스"  //이걸반환해라
  }
}

이렇게 함수로 switch문을 돌려서 

<StBox backgroundColor={item}>{boxname(item)}</StBox>

함수 boxname을 실행시켜서 인자로 맵의 콜백의 인자를 넣어주면 똑같이 나올 수 있겠다.