😎
Onemorebottlee's TIL
  • 🤓Introduce
  • 📖DevLog
    • 💣Error
      • npm ERR! Cannot read properties of null (reading 'edgesOut')
      • git
        • src refspec main does not match any
      • NextJS
        • No img element
        • ReferenceError : document is not defined
        • `next/image` Un-configured Host
  • 📺Lecture
    • Nomad Coders
      • 초보자를 위한 리덕스 101
        • #0 Introduction
        • #1 PURE REDUX: COUNTER
        • #2 PURE REDUX: TO DO LIST
        • #3 REACT REDUX
        • #4 Redux Toolkit
      • 바닐라 JS로 그림 앱 만들기
      • React JS 마스터 클래스
        • #2 Styled Componnents
        • #3 TypeScript
        • #4 Crypto Tracker
        • #5 State Management
        • #6 Trello
        • #7 ANIMATIONS
      • Next.js 시작하기
        • #0 INTRODUCTION
        • #1 FRAMEWORK OVERVIEW
        • #2 PRACTICE PROJECT
      • Typescript로 블록체인 만들기
        • #1 Introduction
        • #2 Overview of TypeScript
        • #3 Functions
        • #4 Classes and Interfaces
        • #5 TypeScript Blockchain
      • SQL Master Class
        • #1 Introduction
        • #2 SQLite
        • #3 Data Definition Language
        • #4 Data Manipulation Language
        • #5 Subqueries and CTEs
        • #6 Indexes
        • #7 MySQL
        • #8 Foreign Keys
        • #9 JOINS
        • #10 Nomalization
        • #11 Events & Triggers
        • #12 Full-Text Indexes
        • #13 PostgreSQL
        • #14 Functions And Procedures
        • #15 Transactions
        • #16 Data Control Language
        • #17 PostgreSQL JSON Columns
        • #18 PostgreSQL Extensions
        • #19 MongoDB
        • #20 REDIS
        • #21 Javascript and Python Drivers
    • Udemy
      • TypeScript 마스터 with Webpack & React
        • [S1] 소개
        • [S2] 설치 및 설정
        • [S3] 타입 애너테이션 기초
        • [S4] 함수
        • [S5] 객체 타입
        • [S6] 배열 타입
        • [S7] 유니온타입
        • [S8] Tuple & Enum
        • [S9] 인터페이스
        • [S10] TypeScript 컴파일러
        • [S11] 미니 프로젝트 DOM, 타입 단언, 그리고 더 많은 내용
        • [S12] Class
        • [S13] TS Class
        • [S14] Generics ⭐⭐⭐⭐⭐
        • [S15] Narrowing
        • [S16] Type Declarations
        • [S17] Module
        • [S18] Webpack 과 TypeScript
        • [S19] React
    • 모두를 위한 컴퓨터 과학 CS50
      • 1. 컴퓨팅 사고
      • 2. C언어
      • 3. 배열
      • 4. 알고리즘
      • 5. 메모리
      • 6. 자료구조
    • 생활코딩
      • DATABASE
        • DATABASE1
  • 📚Book
    • 모던 자바스크립트 Deep Dive
      • 1장 프로그래밍
      • 2장 자바스크립트란?
      • 3장 자바스크립트 개발 환경과 실행 방법
      • 4장 변수
      • 5장 표현식과 문
      • 6장 데이터 타입
      • 7장 연산자
      • 8장 제어문
      • 9장 타입 변환과 단축 평가 ⭐⭐⭐
      • 10장 객체 리터럴
      • 11장 원시 값과 객체의 비교
      • 12장 함수 ⭐⭐⭐⭐
      • 13장 스코프
      • 14장 전역 변수의 문제점
      • 15장 let, const 키워드와 블록 레벨 스코프 ⭐⭐⭐
      • 16장 프로퍼티 어트리뷰트
      • 17장 생성자 함수에 의한 객체 생성
      • 18장 함수와 일급 객체 ⭐⭐
      • 19장 프로토타입 ⭐⭐⭐⭐⭐
      • 20장 strict mode
      • 21장 빌트인 객체 ⭐
      • 22장 this ⭐⭐⭐
      • 23장 실행 컨텍스트 ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
      • 24장 클로저 ⭐⭐⭐⭐⭐⭐⭐
      • 25장 클래스
      • 26장 ES6 함수의 추가 기능
      • 27장 배열 ⭐⭐⭐
      • 28장 Number
      • 29장 Math
      • 30장 Date
      • 31장 RegExp
      • 32장 String
      • 33장 7번째 데이터 타입 Symbol
      • 34장 이터러블
      • 35장 스프레드 문법
      • 36장 디스트럭처링 할당
      • 37장 Set과 Map
      • 38장 브라우저의 렌더링 과정⭐⭐⭐⭐⭐⭐⭐⭐
      • 39장 DOM ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
      • 40장 이벤트⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
      • 41장 타이머
      • 42장 비동기 프로그래밍 ⭐⭐⭐⭐⭐⭐⭐⭐
      • 43장 Ajax
      • 44장 REST API
      • 45장 프로미스
      • 46장 제너레이터와 async/await
      • 47장 에러 처리
      • 48장 모듈
      • 49장 Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축
    • 러닝 타입스크립트
      • Ch.1 자바스크립트에서 타입스크립트로
      • Ch.2 타입 시스템
      • Ch.3 유니언과 리터럴
      • Ch.4 객체
      • Ch.5 함수
      • Ch.6 배열
      • Ch.7 인터페이스
      • Ch.8 클래스
      • Ch.9 타입 제한자
      • Ch.10 제네릭
      • Ch.11 선언 파일
      • Ch.12 IDE 기능 사용
      • Ch.13 구성 옵션
      • Ch.14 구문 확장
      • Ch.15 타입 운영
      • 용어 사전
    • 자바스크립트 완벽 가이드
    • SQL in 10 Minutes
      • 1장 SQL 이해하기
      • 2장 데이터 가져오기
      • 3장 가져온 데이터 정렬하기
      • 4장 데이터 필터링
      • 5장 고급 데이터 필터링
      • 6장 와일드카드 문자를 이용한 필터링
      • 7장 계산 필드 생성하기
      • 8장 데이터 조작 함수 사용하기
      • 9장 데이터 요약
      • 10장 데이터 그룹핑
      • 11장 서브쿼리 사용하기
      • 12장 테이블 조인
      • 13장 고급 테이블 조인 생성하기
      • 14장 쿼리 결합하기
      • 15장 데이터 삽입하기
      • 16장 데이터 업데이트와 삭제
      • 17장 테이블 생성과 조작
      • 18장 뷰 사용하기
      • 19장 저장 프로시저 사용하기
      • 20장 트랜잭션 처리 관리하기
      • 21장 커서 사용하기
      • 22장 고급 데이터 조작 옵션
    • 면접을 위한 CS 전공지식 노트
      • 4 데이터베이스
        • 4.1 데이터베이스의 기본
    • 2023 이기적 SQL 개발자 이론서 + 기출문제
      • 데이터 모델링 이해
        • S1. 데이터 모델링
  • 💻Study
    • CS 지식 발표
      • 1회차
      • 2회차
      • 3회차
      • 4회차
      • 5회차
      • 6회차
      • 7회차
      • 8회차
      • 9회차
    • TypeScript Exercises
      • Ex 1
      • Ex 2
      • Ex 3
      • Ex 4
      • Ex 5
      • Ex 6
      • Ex 7
      • Ex 8
      • Ex 9
      • Ex 10
  • 🔄ETC
    • Article
      • Atomic Design Pattern
      • 프론트엔드 개발자
    • DATABASE
      • Oracle
        • CEIL() & FLOOR() - 소수점 올림 & 내림
        • DUAL 테이블 - 임시 테이블로 결과 확인하기
    • Ubuntu
      • 어플리케이션 업데이트
Powered by GitBook
On this page

Was this helpful?

  1. Lecture
  2. Udemy
  3. TypeScript 마스터 with Webpack & React

[S19] React

Previous[S18] Webpack 과 TypeScriptNext모두를 위한 컴퓨터 과학 CS50

Last updated 1 year ago

Was this helpful?

Typescript 시작

npx create-react-app my-app --template typescript

타입스크립트 컴포넌트를 만드는 기본

출력값에 JSX.Element 타입를 지정한다.

지금은 주로 사용하지 않지만 Function Component, FC를 사용했다고 함

TS 프로퍼티

props 로 내려준다.

interface를 만들어 props의 타입을 설정할 수 있음

ShoppingList Component

상위 컴포넌트인 App 에서 데이터를 내려주고,

하위 컴포넌트 ShoppingList에서 Props의 타입을 설정하고, 데이터를 받아 표현한다.

useState

중복되는 인터페이스를 파일에 모아 하나의 인터페이스를 재사용할 수 있음

useRef

useRef 를 사용할때 <HTMLInputElement>를 사용함

📺