입문

마지막 React/typescript 환경 구조를 계속합니다.
여전히 졸렬한 점이 많으니 잘 부탁드립니다.
전제 조건은 지난번과 같다.
하나: React/TypeScript 환경 구성편
이번에 우리는 스타일 관계를 신경 쓰는 라이브러리를 도입할 것이다.
제목과 같이 이모션을 사용해 보기로 했습니다.
일단 이번 목표는 스타일을 간단히 맞추는 것이다.

왜 이모션을 선택했는지

emotion: introduction
확실한 이유가 없다.
훗날의 창고에서는 각양각색의 작법을 쓸 수 있다고 한다.
간신히 만지작거렸는데 어쨌든 사용하지 않은 물건을 사용해 보세요.
styled-components와 비교해도 인기가 많다.

emotion 배포 전 1

이번 가져오기는 그 1 에서 계속됩니다.
그래서 v0.1.0으로 공개합니다.다음은 tag를 첨부한 명령입니다.
특별히 발표된 것은 아니기 때문에 지점만 자르면 되지만 제대로 사용하지 않은 기능이기 때문에 사용해 보세요.$ git tag -a 'v0.1.0' -m 'react/typescript環境構築編' $ git push origin v0.1.0시도하려는 사람은 다음 저장소를 복제하고 v0.1.0 탭을 체크 아웃하십시오.$ git clone https://github.com/savacan/sample-react-ts.git $ cd sample-react-ts $ git checkout -b (ブランチ名) refs/tags/v0.1.0 $ yarn install

babel 가입

다음 절에서 실행되는 명령 동작은 프로젝트 루트 디렉터리입니다.
지난번 환경 구축편은 babel을 가져오지 않았습니다.
문서만 읽으면 babel을 넣는 게 나을 것 같아서 가져옵니다.
내가 먼저 필요한 물건을 넣을게.$ yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader다음은 babel의 설정 파일을 만듭니다.$ code .babelrc.babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

다음은 웹 팩입니다.config.js에 babel-loader를 사용하는 설정을 추가합니다.
이 때,loader가 아래에서 실행됩니다. 순서를 주의하십시오.
webpack.config.js

module.exports = {
 // 省略
   module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: [
            {loader: 'babel-loader'},
            {loader: 'ts-loader'}
          ]
        }
      ]
    },
 // 省略
}

이 상태yarn dev에서 화면을 보면 바벨이 가져온 것이다.

@emotion/core

react에서 사용할 때 이걸 넣으면 먼저 사용할 수 있습니다.따라서 먼저 문서를 읽어야 한다.
………
css 속성에서 스타일 대상을 지정하는 형식으로 사용하는 것 같습니다.
일단 가져오세요.
우선 설치합니다.$ yarn add @emotion/core그리고 사용해 보세요.
component 디렉터리를 만들고 hoge 구성 요소를 만듭니다.$ mkdir src/component $ code src/component/hoge.tsx

넘어지다

바로 가져오기... 어?

그래서 제가 좀 알아봤어요.
모듈이 해결하는 데 문제가 생긴 것 같아서 모듈 Resolution 옵션을 node로 설정하면 해결됩니다.이를 계기로 tsconfig.json을 (으)로 변경합니다.
tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist",
        "sourceMap": true,

        "module": "ESNEXT",
        "target": "ESNext",
        "jsx": "react",

        "strict": true,
        "noUnusedLocals": true,
        "noImplicitReturns": true, 

        "moduleResolution": "node",

        "typeRoots": [
            "node_modules/@types"
        ]
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ],
}

＊moduleResolution 옵션은 기본적으로 node와 같은 설명을 보았지만 명시적인 쓰기를 통해 바뀔까...?

넘어지다

정신을 차리고 hoge 구성 요소를 적으세요.
hoge.tsx

/** @jsx jsx */
import * as React from 'react'
import {css, jsx} from '@emotion/core'

const Hoge: React.FC = () => {
    return (
        <div css={css({color: 'red'})}> Hoge is red! </div>
    )
}

export default Hoge;

그런 다음 Hoge 구성 요소 index를 표시합니다.tsx를 다시 쓰다.
index.tsx

import * as React from 'react';
import { render } from 'react-dom';
import Hoge from './components/hoge';

const Main: React.FC = () => (
    <div>
        <div>Hello, Happy World!</div>
        <Hoge></Hoge>
    </div>
);

render(<Main />, document.getElementById('root'));

당분간 이렇게 $ yarn dev 하면 아래 화면이 보일 거예요.

이렇게 해서 잠시 가져왔습니다.
그러나 이렇게 되면 구성 요소의 첫 줄은 매번 같은 평론을 넣어야 한다.
따라서 가져오기 @emotion/babel-preset-css-prop 를 시도하십시오.$ yarn add -D @emotion/babel-preset-css-prop에서 설명한 대로 해당 매개변수의 값을 수정합니다.babelrc에 추가합니다.
.babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
        "@emotion/babel-preset-css-prop"
    ]
}

그리고 hoge.tsx에서 시작하는 주석을 삭제하려고 시도합니다.
그리고 @emotion/core에서 가져온 jsx는 사용하지 않은 것으로 컴파일됩니다.
문서 레지스트리에 항목을 추가합니다.
hoge.tsx

import * as React from 'react'
import * as emotion from '@emotion/core'

const Hoge: React.FC = () => {
    return (
        <div css={emotion.css({color: 'red'})}> Hoge is red! </div>
    )
}

export default Hoge;

이걸로 모니터를 해보면... 어?

Hoge is red는 빨갛게 변하지 않았어요.
개발자 도구로 확인해 보세요.

css 속성을 설명하지 않았군요.
보아하니 이모션의 jsx 함수가 아니라 React가 tsx를 해석하는 것 같다.
지금까지 진행된 설정을 냉정하게 생각해 보면 웹팩은 ts-loader를 먼저 호출한 다음babel을 통과해야 한다.그럼 문제는 ts-loader인가요?그래서 나는 tsconfig 문서를 다시 읽기로 결정했다.
컴파일러 Option의 jsx에서react를 지정하는 것은 좋지 않은 것 같습니다.
여기서 jsx를 설명한 것 같습니다.
따라서 jsx의 해석을 늦추기 위해 jsx에서preserve를 지정했습니다.

순조롭게 진행되었는데...
무식할 뿐이지만 새로운 것을 만지작거릴 때는 역시 시간이 걸린다.
그리고 import를 정리할 필요도 없을 것 같습니다.
emotion/babel-preset-css-prop은 필요한 곳에 자동으로 import를 넣을 수 있을 것 같습니다. Hoge 구성 요소는 다음과 같이 쓸 수 있습니다.
hoge.tsx

import * as React from 'react';
import {css} from '@emotion/core';

const Hoge:React.FC = () => {
    return (
        <div css={css({color: 'red'})}>Hoge red!</div>
    )
}

export default Hoge;

총결산

여기까지 수고하셨습니다.
@emotion/core 가져오기만 끝났습니다.
나는 tscofing, 웹팩, babel의 설정을 반성하고 정말 열심히 공부해야 하는데...
이번에는 시간이 길어졌어요. 여기까지.
다음에는 이모션으로 구성 요소를 써서 사용한 느낌과 행동을 확인하고 싶습니다.
나는 네가 이곳이 틀렸다고 지적하기를 기다리고 있어, 움직일 수 없다.
다음은 메모리 라이브러리입니다. 이번 진전은add-emotion 지점을 차단했습니다.