분류 전체보기67 랜더링 리스트 및 조건부 Content # 데이터의 랜더링 목록 현재까지 우리가 만든 프로그램은 하드코딩이 되어있는 상태로, dynamic 하게 데이터를 받아오지 못하고 있다. form에 새로운 정보를 입력해도 별다른 업데이트가 일어나지 않는다. 현재 컴포넌트에 직접적으로 하드코딩을 해두었지만, 이렇게 하는건 지양해야 한다. 컴포넌트에서 App.js에 있는 expenses 배열을 랜더링하고 싶다. 첫번째 단계는 props를 통해 expenses를 전달해주는 것이다. item prop으로 넘겨주고 있고, item은 {expenses} 배열을 가리키고 있다. 하지만 현재 이용하고 있지 않았다. 이 부분을 바꿔보자 우리는 지금 컴포넌트에서 각각의 들을 랜더링 하고 싶다. 컴포넌트들 위에 JSX 신텍스를 사용해 배열의 기본 내장 메서드인 map()을.. 2023. 2. 28. [TypeScript] 타입 추론 이해하기 # let 과 const의 타입추론 (+ as const) let 과 const로 정의될 때 타입추론에 대한 차이가 있음 let a ='Mark' // string const b = 'Mark' // 'Mark' => literal type let c = 38; // number const d= 28 // 28 => litetal type let e= false; // boolean const f = false // false => literal type let g = ['Mark', 'haeun'] // string[] const h = ['Mark', 'haeun'] // string[] const i = ['Mark', 'haeun', 'bokdong'] as const // readonly ['M.. 2023. 2. 27. [TypeScript] 서브타입과 슈퍼타입 # 타입트리 계층 타입스크립트에서 모든 타입은 계층구조에서 자리를 차지한다. 타입은 트리의 부모노드와 자식노드가 될 수 있다. 타입시스템에서 이러한 관계에 대해 상위노드를 슈퍼타입, 하위노드를 서브타입이라고 한다 "Car is Vehicle" : 부모클래스가 Vehicle, 자식클래스가 Car일때, Car is Vehicle은 성립하는 문장이지만 그 반대는 안된다. 이 상속의 의미론은 타입스크립트의 타입계층에서도 적용된다. 출처 : https://itchallenger.tistory.com/447 타입스크립트 타입 호환성과 타입 계층 트리 타입스크립트의 타입 계층을 통해 타입 호환성을 알아봅시다. 1. 타입 호환성은 뭔가요? 타입 호환성 Documentation - Type Compatibility Ho.. 2023. 2. 27. [TypeScript] Interface와 Type Alias Structural type system : 타입스크립트에서느 구조가 같으면 같은 타입으로 취급된다. // interface와 type의 모양(구조)가 같으면 같은 타입으로 인식된다. interface IPerson{ name : string; age : number; speak(): string; } type PersonType ={ name : string; age: number speak(): string; } let personInterface : IPerson = {} as any ; let personType : PersonType = {} as any; personInterface = personType; personeType = personInterface; nominal type syst.. 2023. 2. 27. 이전 1 2 3 4 5 6 ··· 17 다음
