TypeScript의 개념과 접목해 React Hook에 대해 정리해보겠습니다. 먼저, React Hook은 왜 생겨나게 된 것일까요? 결론부터 말씀드리면, 리액트 16.8부터는 기존 클래스 컴포넌트의 단점을 해결하기 위해 탄생했습니다. 기존 클래스 컴포넌트는 아래와 같은 단점을 가집니다. 1) 컴포넌트 간 상태 로직 재사용이 어렵다2) 생명주기 메서드에 서로 관련없는 로직들이 얽혀 코드의 복잡성이 증가된다. 아래 예시 코드를 보며 클래스 컴포넌트의 단점을 좀 더 자세히 살펴보겠습니다. // 기존 클래스 컴포넌트의 예시class UserDashboard extends React.Component { constructor(props) { super(props); this.state = { ..

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로 변경해줌으로써 발생하는 오류 해결  📌 진행해..