[React] 리액트(CRA) 프로젝트 세팅하기 - typescript, alias, emotion

CRA로 리액트 프로젝트 세팅하기

• typescript
• 경로 alias
• emotion

리액트로 토이프로젝트를 하게 되면 주로 위의 세팅을 기본적으로 이용한다.

순서대로 적용하는 법을 정리하고자 한다.

#1 CRA로 typescript 리액트 프로젝트 생성

npx create-react-app my_project --template typescript

프로젝트를 생성하고자 하는 위치에서 터미널을 열어 위의 명령어를 입력한다.

명령줄의 my_project 부분에 프로젝트명을 입력한다.

프로젝트가 생성되었다면 아래부터는 프로젝트 내부에서 설정하는 부분이다.

---

#2 alias 설정

리액트 프로젝트를 할 때, 상대경로로 찾아가려면 적어도 두 번,

많게는 네다섯 번까지 경로를 타고 올라가야 할 때가 있다.

이 부분을 경로의 별칭을 적용해 절대경로처럼 사용할 수 있게 적용해볼 것이다.

사람에 따라, 프로젝트의 규모에 따라 적용을 고려하는 부분이라 필수는 아니다.

path alias typescript react

적용 전

import Component from “../../../../../components/Component”

적용 후

import Component from “@components/Component”

2-1. 패키지 추가

eject를 사용하지 않고 CRA 내부 설정을 변경할 수 있는 패키지를 설치한다.

yarn add -D customize-cra react-app-rewired react-app-rewire-alias

2-2. package.json 파일 수정

pakage.json 파일에서 scripts 부분을 아래처럼 변경해준다.

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

2-3. config-overrides.js, tsconfig.paths.js 파일 추가

package.json과 동일한 경로에 config-overrides.js 파일을 추가하여 아래의 내용을 작성한다.

const { alias, configPaths } = require('react-app-rewire-alias')

module.exports = function override(config) {
  return alias(configPaths('./tsconfig.paths.json'))(config)
}

마찬가지로 같은 경로에 tsconfig.paths.js 파일을 추가하여 아래 내용을 작성한다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@assets/*": ["src/assets/*"],
      // ... 원하는 폴더 추가
    }
  }
}

2-4. ts.config.json 수정

{
  "compilerOptions": {
	...
  },
  "include": [
    "src",
    "**/*.ts",
    "**/*.tsx"
  ],
  "extends": "./tsconfig.paths.json"
  ...
}

 

2-5. alias 적용 확인

이제 App.ts에 들어가서 alias가 장 적용이 되었는지 확인해보자.

import React from 'react'
import '@/App.css'
import TestComponent from '@components/TestComponent'

function App() {
  return (
    <div className="App">
        <TestComponent />
    </div>
  )
}

---

#3 emotion 추가

yarn add @emotion/react

 

프로젝트에 위 명령어를 작성하여 emotion을 추가해준다.

설치가 되었다면 사용하고자 하는 파일에 들어가 아래처럼 작성한다.

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

function TestComponent() {
  return (
    <p css={styles}>
      테스트용 컴포넌트
    </p>
  )
}

const styles = css({
  color: '#f3a531',
  fontSize: '60px',
})
export default memo(TestComponent)

주의할 점은 항상 최상단에 /** @jsxImportSource @emotion/react */ 를 달아주어야 한다.

후 더 자세한 사항은 https://emotion.sh/docs/install 이모션 공식 사이트에서 확인이 가능하다.