[Portfolio 포트폴리오] 리액트에서 타입스크립트 설치 react typescript install with yarn

프로젝트 생성 시 typescript 로 설치하는 법

yarn create react-app my-app --template typescript

// OR

npx create-react-app my-app --template typescript

 

기존 프로젝트에 typescript 를 설치하는 법

yarn add typescript @types/node @types/react @types/react-dom @types/jest

// OR

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

 

기존 프로젝트에 추가했을 경우

tsconfig.js 파일에 설정을 추가해야함

 

이 때, tsconfig.js 파일이 없다면 생성해준다

npx tsc --init

 

생성 후, 기본 세팅으로 되어있는 tsconfig.js 파일에

{
  "compilerOptions": {
    "target": "es2016",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "./src/"
  ],
  "exclude": [
    "node_modules/*"
  ]
}

 

해당 옵션들을 수정해준다

 

참고1 : https://klmhyeonwooo.tistory.com/42

기존 React 프로젝트에 TypeScript 적용하기

참고2 : https://memostack.tistory.com/281

기존 React App에 Typescript 적용하기

 

.js 파일을 .ts 또는 .tsx 로 확장자를 변경해주고

파일 내용 또한 수정해줘야 한다

 

index.js -> index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,

	document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

render 에서 에러가 남..

 

구글링 해보니 버전 업데이트가 되면서 render 를 지원하지 않는다고 함

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

사실 처음 세팅되어있던 것과 99% 동일

const root 쪽에 " ! " 추가해주면 됨

참고 : https://codiving.kr/132

[React] ReactDOM.render is no longer supported in React 18 해결하기

 

app.js -> app.tsx

import logo from './logo.svg';
import React from 'react';
import './App.css';

const App: React.FC = () => {
	return (
		<div className="App">
			<header className="App-header">
				<img src={logo} className="App-logo" alt="logo" />
				<p>
					Edit <code>src/App.js</code> and save to reload.
				</p>
				<a
					className="App-link"
					href="https://reactjs.org"
					target="_blank"
					rel="noopener noreferrer"
				>
				Learn React
				</a>
			</header>
		</div>
	);
}

export default App;

 

logo 에서 에러남

 

custom.d.ts 파일 생성하고

declare module '*.svg' {
  const content: any;
  export default content;
}

내용 추가 후 저장

 

tsconfig.json 파일에서

  "include": [
    "./src/",
    "custom.d.ts"
  ],

 

"include" 부분에 custom.d.ts 파일 추가

 

참고 : https://velog.io/@jayone1202/Reacttypescript%EC%97%90%EC%84%9C-svg-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

React+typescript에서 svg 사용하기

 

클리어!