TIL 홈페이지 만들기 7

npm i @emotion/core @emotion/react @emotion/styled 을 설치해 준다.
pages 디렉토리 안에 index.tsx 을 아래와 같이 수정한다.

import React, { useState } from "react";
import Head from "next/head";
import styled from '@emotion/styled'

export default function Home() {
  const [text, setText] = useState<string>("자바스크립트");

  setTimeout(() => {
    setText("타입스크립트")
  }, 1000)

  return (
    <div className="container">
      <div>
        <span>{text} 적용 완료</span>
      </div>
      <Button>
        aaaaa
      </Button>
    </div>
  );
}

const Button = styled.button`
  color: turquoise;
`

그리고 다시 서버를 실행하면 이모션이 정상적으로 적용되는 것을 확인 할 수 있다.