React + TypeScript + emotion + yarn 이용해서 틱택토 게임 만들기(3) emotion 사용

emotion을 적용하기 위해 tsconfig.json에

"jsxImportSource": "@emotion/react"

를 입력하자 마자 오류가 생겼다. 

오류 내용 : 

Cannot find module '@emotion/react/jsx-runtime' or its corresponding type declarations

알고 보니까 이건 VS code의 버전 문제였다.

>TypeScript의 버전을 WorkSpace 버전으로 바꾸면 바로 에러가 사라진다.

 

다음으로 CSS  Props 방식으로  사용해보자

 

그리고 그냥 쓰지 말고 최상단에

/** @jsxImportSource @emotion/react */

 

해당 코드를 적어줘야하는데 이는 JSX pragma라고 하는데 Babel 트랜스파일러한테 JSX 코드를 변환할 때, React의 jsx()함수가 아니라 Emotion의 jsx()함수를 대신 사용하라고 알려주기 위해 사용한다.

이를 입력하면 css Props 형식으로 만든 스타일이 적용된다. 

 

이렇게 해서 

// 문자형
const styled = css`
	스타일 값
`

// 객체형
const styled = {css({
	스타일 값
})}

 

해당 방식으로 정의한 후 엘리멘트에 Props 형식으로 보내주면 된다.

 

시간이 부족한 관계로 각 div 크기 고정만하고 마무리했다.