Web Study/TypeScript4 리액트와 타입스크립트 useState useState(초기값) 형태로 사용 import React, { useState } from 'react' export default function Counter() { const [count, setCount] = useState(0); return ( {count} setCount((cur :number) => cur + 1)}>+ setCount((cur :number) => cur - 1)}>- ) } useRef HTML DOM 요소를 컨트롤할 때 컴포넌트가 리렌더링 되더라도 값을 유지하는 변수로 사용할 때 HTML DOM 요소를 컨트롤하려면 HTML태그명Element 의 타입으로 접근 const inputRef = useRef(null); ... import React, {.. 2023. 4. 30. 타입스크립트 필수 문법 정리 인터페이스 interface readonly 읽기전용 키워드 ? 선택적 프로퍼티/메서드 키워드 열거형 enum 리터럴 타입, | 를 사용 Any 어느 타입이든 가능하게 설정 유니언 타입 | 를 사용하여 여러 타입들을 동시에 지정 타입 검사 typeof 커스텀 타입 만들기 type 매개변수의 기본값 지정 (= 기본값) 접근 제한자 private public protected 클래스의 constructor 클래스로부터 객체를 만들 때 호출되어 객체의 초기화 담당 private로 정의된 프로퍼티를 다루기 위한 Getter/Setter get 프로퍼티() { return } set 프로퍼티(value) { } 타입스크립트와 HTML 자바스크립트 -> document.querySelector() 로 DOM 에 접.. 2023. 4. 25. 타입스크립트 기초 인터페이스 키워드 : interface 인터페이스명은 보통 i- 접두사를 붙여줘서 명명하지만 타입스크립트에선 지양한다. 그리고 첫글자는 대문자를 사용해준다. interface 인터페이스명 { 키: 타입; 키: 타입; ... } interface Student { studentID :number; studentName :string; age :number; gender :string; subject :stirng; courseCompleted : boolean; } 명시된 인터페이스는 타입처럼 사용해줄 수 있다! 인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값으로 가지도록 강제된다! function getStudentDetails(studentID :number) :Student { retur.. 2023. 4. 20. 학원 끝! 타입스크립트 시작! https://youtu.be/VJ8rvsw2j5w 타입스크립트는 자바스크립트를 사용하며 모든 기능을 포함하나 자바스크립트에 포함되지 않은 새로운 기능이 있다. 즉, 자바스크립트의 타입부분을 업그레이드한 것 - 변수 값에 데이터 타입 지정 가능 function add (a, b) { return a+b; } console.log(add('3', '5')); // 35 //////// function add (a: number, b:number) { return a+b; } console.log(add('3', '5')); // error - 객체지향적 프로그래밍 지향 - 컴파일 타임 오류 발견 가능 타입스크립트는 프로그래밍 언어인 동시에 컴파일러인 것이다. 타입스크립트 개발 환경 설정 npm i -g t.. 2023. 4. 20. 이전 1 다음