React JSX (JavaScript XML)를 React TSX (TypeScript XML)로 변환해야 할 때, 알아야할 React의 핵심이론들을 정리해보았습니다. 간단한 Button 컴포넌트의 JSX 버전을 TSX로 변환할 때도, 아래와 같이 여러 개념에 의한 변환이 필요합니다. // JSX 버전const Button = (props) => { return 클릭}// TSX 버전// 1. Props 타입 정의 - React.ComponentPropsWithoutRef 활용type ButtonProps = React.ComponentPropsWithoutRef & { customProp?: string;}// 2. FC vs 일반 함수 선언 - 함수형 컴포넌트 타입 활용const Button: ..

타입 스크립트에서 사용되는 데이터 타입들을 원시타입, 객체타입부터 타입스크립트에서만 제공되는 고급 타입까지 총 정리해보았습니다. 전반적인 타입스크립트의 계층 구조는 아래 사진을 참고해보시기 바랍니다.  1. 원시타입number, string, boolean은 가장 대표적인 원시타입으로, 가장 많이 사용되고 사용자에 따라 다르게 사용될 여지가 적지만,null 이나 undefined는 tsconfig 옵션이나 사용자의 취향에 따라서 다르게 사용될 여지가 많습니다. 1) booleantrue와 false 값만 할당할 수 있는 타입. // booleanlet bool1 : boolean = true;let bool2 : boolean = false;2) undefined 정의되지 않았다는 의미의 타입. 초기화되..

기존에 javascript로 작성된 React 코드를 TypeScript로 변환하는 방법을 정리해보았습니다. 마지막에는 처음부터 React Typescript 로 프로젝트를 설정해 시작할 수 있는 Template 설치 방법도 정리해놓았으니 함께 참고해보시기 바랍니다.  📌 변환하는 순서보통 기존의 React javascript 파일을 React tyescript로 변경할 때는 아래와 같은 절차를 따르게 됩니다.  1) 리액트 앱을 위한 타입 정보들을 제공하는 패키지 설치 (4가지) 2) tsconfig.json 파일 root 경로에 추가해 컴파일러 옵션 설정3) 모든 js 파일을 jsx로 변경 4) 개발 파일 확장자를 하나씩 tsx 로 변경 5) tsx로 변경해줌으로써 발생하는 오류 해결  📌 진행해..

React로 todoList 만들어보며 사용한 주요 개념들을 정리해보았습니다.    import "./App.css";import Header from "./component/Header";import TodoEditor from "./component/TodoEditor";import TodoList from "./component/TodoList";import { useState, useRef } from "react";function App() { const idRef = useRef(3); const mockTodo = [ { id: 0, isDone: false, content: "React 공부하기", createDate: new Date().get..