React/JSX - 절대경로 지정

 

`~/` 에 대한 절대경로를 추가해 보자.

 

1. paths alias 설정

$ yarn add --dev react-app-rewired customize-cra

 

2. jsconfig.json

{
  "extends": "./jsconfig.paths.json",
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "./node_modules",
    "**/node_modules",
    "dist"
  ]
}

 

3. jsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "src/*"
      ]
    }
  }
}

 

4. config-overrides

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    '~': path.resolve(__dirname, 'src'),
  }),
);

 

5. 실행 스크립트 변경 (package.json)

{
  ...
  
  "scripts": {
    "start": "set PORT=3000 && react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  
  ...
}

 

6. Test.js

import React from 'react';

class Test extends React.Component {
    render() {
        return (
            <React.Suspense>
                <br/>
                <br/>
                <br/>
                <div>test</div>
                <br/>
                <br/>
                <br/>
            </React.Suspense>
        )
    }
}

export default Test;

 

7. App.js

import logo from './logo.svg';
import './App.css';
import Test from '~/views/components/Test'

function App() {
  return (    
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Test />
      </header>
    </div>
  );
}

export default App;

 

8. 확인

 

 

 

참고) paths alias
- 절대 경로를 사용하려면 tsconfig.json과 webpack의 설정을 건들여야 한다.
단순하게 tsconfig.json의 paths 설정을 바꾸면 된다 생각했지만 React 실행시 강제적으로 paths 설정을 지워 버린다. (충격...)
https://7stocks.tistory.com/127

- React + TypeScript 환경에서 절대경로 사용하기
https://velog.io/@hoo00nn/React-TypeScript-%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

- Alias solution for rewired create-react-app
https://githubhot.com/repo/mryhchan/react-app-rewire-alias