✨ Front-End/TypeScript

제네릭은 C#, JAVA 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징이 있다. 특히, 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용된다. ✅ 제네릭의 한 줄 정의와 예시 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다. 위 함수는 text라는 파라미터에 값을 넘겨받아 text를 반환해 준다. hi, 10, true 등 어떤 값이 들어가더라도 그대로 반환한다. function getText(text) { return text; } 이 관점에서 제네릭을 한 번 살펴보자. 아래 함수는 제네릭 기본 문법이 적용된 형태다. 이제 함수를 호출할 때 아래와 같이 함수 안에서 사용할 타입을 넘겨줄 수 있다. function getText(text:..
type과 interface 키워드는 타입을 정의할 때 사용한다. 보통 React app 내에서는 component에 넘겨주는 props의 타입을 정의하기 위해 아래와 같이 사용하곤 한다. type GreetingsProps = { //type 사용해도 정상 작동 name: string; }; interface GreetingsProps { //interface 사용해도 정상 작동 name: string; }; const Greetings = ({ name }: GreetingsProps) => ( Hello, {name} ); 이 두 키워드 둘 다 타입 정의라는 비슷한 역할을 하기 때문에 차이점과 언제, 어느 상황에 어떤 키워드를 사용하는 것이 적절할지 짚고 넘어갈 필요가 있다. ❗ 뭐가 다른 걸까? ..
1. TS2322: typescript에서 useRef를 사용할 때 Type 'MutableRefObject' is not assignable to type 'string | ((instance: HTMLInputElement | null) => void) | RefObject | null | undefined'. Type 'MutableRefObject' is not assignable to type 'RefObject'. Types of property 'current' are incompatible. Type 'HTMLInputElement | undefined' is not assignable to type 'HTMLInputElement | null'. Type 'undefined' is not..
타입스크립트란? - 자바스크립트에 타입을 추가해서 확장시킨 것이다. - 자바스크립트를 이해함으로써 코드를 실행하기 전 에러를 잡거나 고치는 데 시간을 절약해준다. - 어떤 브라우저나 어떤 운영체제 어떤 실행환경이든 가능하며 완전히 오픈소스다. 타입스크립트는 "Compiled Language" 자바스크립트는 "Interpreted Language" 타입스크립트는 컴파일 타임에서 미리 에러를 찾아 고칠 수 있기 때문에 편리하다. 타입스크립트에서 바로 해석해서 실행시켜주는 자바스크립트로 컴파일러가 변경해준다! ✅ 자바스크립트 Type vs 타입스크립트 Type 자바스크립트는 Dynamic (Types resolved at runtime) 개발할 땐 알 수 없고 런타임에 도달해야만 잘못되었는지 알 수 있다! 타..
박브레드
'✨ Front-End/TypeScript' 카테고리의 글 목록