[typescript & emotion] react 에서 emotion 사용해보기

style-in-js 를 공부해 보는 중이다.

그중에서 emotion 을 공부해보는 중이다. 

 

styled component 형태로 만들어서 사용하기도 좋지만 css prop 을 이용해 inline 형태로도 사용할수 있다라는 점이 장점이라는데 한번 써보자!!!

 

먼저 인라인 형태로 써봤다.

/** @jsxImportSource @emotion/react */
import React from 'react'
import {css} from '@emotion/react'

const Card = () => {

  const style = css`
    color : hotpink;
  `
  return (
    <div css={style}>
      카드
    </div>
  )
}

export default Card

인라인 형태로 써봤다. 사용법은 간단하다 필요한 모듈을 다운 받고 css prop 을 이용할수 있어서 정해놓고 넣어도 되고 그냥 바로 넣어도

된다 

그런데 한참 헤멨다. 왜냐하면 맨위에 줄을 안쓰고 하다보니까 

css 그런 prop 은 없다고 타입스크립트 에러가 떳다. 

tsconfig.json 파일에서 types 설정을 해줘야 된다는 글도 있었는데 하다가 안되서 따른거 찾아보다가 저거 넣으니까 됬다.

아직 정확한 이유는 잘 모른다. 추측하기로는 타입스크립트 설정과 관련에서 파일을 불로오는 경로문제 ??? 요런 느낌인거 같은데 잘 모르겠다. 근데 내가 typescript 공부중인데 설정파일이랑 이런게 잘 나와있다보니까 개념들을 잘 모르는거 같다. 공부할때  의미파악을 어느정도 하면서 넘어가야 겠다는 .. 생각이 드네 

---

styled component 로 만들어서 써보기

import styled from '@emotion/styled'

export const Button = styled.div`
width : 100px;
height: 100px;
background-color:pink;
&:hover {
  background-color:black;
}
`;

 

 

참고:velog.io/@gytlr01/emotion-%EC%A0%95%EB%A6%AC

emotion 정리.