[React x Typescript] App.tsx, Index.tsx 설정하는 방법

React 프로젝트에 Typescript 사용할 때 App.tsx와 index.tsx을 설정하는 방법에 대해서 정리합니다. 

 

 

*App.tsx

import './App.css';

const App: React.FC = () => {   //{: React.FC는 없어도 잘 동작합니다. }
  return (
    <div className="App">
      <h1>MAIN</h1>
    </div>
  );
}

export default App;

 

그렇다면 React.FC 는 무슨 역할을 하는 친구일까요??

> **FC** 라는 제네릭 타입을 이용하여 함수형 컴포넌트들이 타입스크립트로 작성 할 수 있게 해주는 역할을 합니다. 

 

 

 

잠깐.. 근데 이젠 더이상 " React.FC " 를 사용하지 않는다구요..?

:: 참고 - React.FC를 사용하지 않는 이유 

> 굳이 React.FC를 쓰는 것보다 props 를 활용하는 것이 다양한 경우의 수를 방지하고 근본 JS에 가깝끼 때문이라고 합니다. 

 

 

 

 

*Index.tsx__[1]

import React from 'react';
import {createRoot} from 'react-dom/client';
import './index.css';
import App from './App';

const rootElement = document.getElementById('root');
if(!rootElement) throw new Error('Failed to find the root element');
const root = createRoot(rootElement);  
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

:: 참고 - The root index.ts file in a TypeScript project

 

 

*Index.tsx__[2]

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

const root = ReactDOM.createRoot(
    document.getElementById("root") as HTMLElement
);
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

 

왜 이렇게 하는 이유는 무엇일까? 

> 그 때 페어분께 듣기로는 타입스크립트가 리액트랑 달리 DOM 에 접근을 못해서 저렇게 사용한다고 들었던 듯..

 

>