React useRef 훅와 필요에 따라 설정해 사용하는 custom Hook에 대해 정리해보았습니다.  1️⃣ useRef리액트 어플리케이션에서 요소에 포커스를 설정하거나 특정 컴포넌트의 위치로 스크롤 하는 등 DOM을 직접 선택해야하는 경우 사용합니다. ● useRef의 타입 정의타입 정의를 보면 useRef는 MutableRefObejct 또는 RefObejct를 반환합니다.// useRef의 타입 정의 3가지function useRef(initialValue: T): MutableRefObject; // 👈 일반적인 값을 저장할 때function useRef(initialValue: T|null): RefObject; // 👈 DOM 요소를 참조할 때function useRef(): ..

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 정의되지 않았다는 의미의 타입. 초기화되..