[React + TypeScript] 이벤트 핸들러 정리 React.ChangeEvent – onChange 이벤트 등에 사용 React.MouseEvent – onClick 이벤트 등에 사용 React.KeyboardEvent – onKeydown, onKeyup 이벤트 등에 사용 React.FormEvent – 태그의 onSubmit 등에 사용 사용예제 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement TypeScript 2023.03.30
[React + TypeScript] React.FC 변경된점 과 사용법 FC : function Components // FC 를 쓰면 props 안의 chilren 을 쉽게 사용할 수 있다. // 제네릭까지쓰면 FC 에 들어있는 chilren 과 들어올 props 의 타입을 같이 사용가능하다. // 하지만 좋은 방법은 아니라고한다. // 그 이유는 사용하지 않는 children 을 암시적으로 가지고 있다고 추정 하기때문에 안티 패턴이다. // react 18v 부터는 FC의 암시적인 children이 삭제되었다고한다. 그러면 쓸 이유가 더더욱 줄어든다. app.tsx Todos 컴포넌트에 아이들이라는 children 을 내려주고있다. FC 를 사용하면 children 을 암시적으로 갖고있어서 타입설정을 안해줘도 된다고 알고있었는데 에러가 난다. 아마 리액트 18버전부터 변.. TypeScript 2023.03.29
[TypeScript] Conditional Type 상속받은 타입이 무엇일때 타입은 이것이다. 라고 지정해줄 수 있음 체크 라는 타입에 상속받은 타입이 string 이면 boolean 아니면 number ex : ) TypeScript 2021.11.09
[TypeScript] Mapped Type 비디오 라는 타입을 열심히 다른곳 에서 쓰고있다가 갑자기 비디오 타입에 속성을 변경하고 싶을때 쓰고있는 다른곳에는 영향을 안주고 바꾸는 방법이 있다 바로 Mapped Type 이다. 만약 위의 비디오라는 타입에서 타입들을 모두 옵셔널 타입으로 바꾸고싶다면 요렇게 물음표를 붙힌 새로운 타입을 만들 수도 있겠지만 그렇다면 기본 비디오 라는 타입에 새로운 타입이 생성되면 비디오2 에도 똑같이 계속 추가해 주어야 하는 문제점이 있다. 요것이 매퍼 타입이다. 받아온 T 타입안의 요소들을 루프를 돌며 인덱스 타입을 이용해서 다시한번 지정해주는 방법이다. 위의 옵셔널이라는 타입은 말 그대로 물음표를 붙혀서 받아온 타입들을 모두 옵셔널로 바꿔주는 타입이다. 요런식으로 옵셔널 타입에 제네릭으로 사용할 타입을 넣어주면 된.. TypeScript 2021.11.09
[TypeScript] generic 제네릭 타입을 외부에서 정의할수 있음. ex: ) function 에서의 제네릭 위와 같이 호출시 타입을 지정할 수 있음 class 에서의 제네릭 제네릭 응용 extends 로 다른 타입을 확장할 수 있다. 제네릭 조건 obj 안의 key 를 이용해 value 를 뽑는 함수를 만들때 getvalue 의 제네릭 타입을 obj : T , key : keyof 를 이용한 obj 의 key 리턴타입을 obj[key] 로 준다 TypeScript 2021.11.04
[TypeScript] OOP 원칙 1. 캡슐화 서로 연관있는 함수와 데이터를 모으는것 - 은닉화 외부에서 보일필요가 없는 데이터를 숨기는것 접근 제한자 public 어디서든 접근가능 private 클래스 밖에서는 접근이 안됨 protected 상속받은 클래스에서는 접근 가능함 함수 또는 변수 앞에 위에 속성들을 붙혀서 정보를 은닉 할 수 있음. ex:) * static class를 통한 별도의 인스턴스나 객체를 생성하지 않고도, 바로 class 내부의 함수 및 인자를 사용할 수 있는 방법 ex :) const test = new coffeeMaker(); test.makeMachine(10) 요렇게 함수호출을 해야 되던것을 static 을 붙히면 const test = CoffeeMaker.makeMachine(10) 요렇게 바아로 cl.. TypeScript 2021.11.02