분류 전체보기67 [TypeScript] 타입시스템 사용하기 1. 작성자와 사용자 타입시스템 : 컴파일러에게 사용하는 타입을 명시적으로 지정하는 시스템 / 컴파일러가 자동을 타입을 추론하는 시스템 타입스크립트의 타입시스템 : 타입을 명시적으로 지정할 수 있고, 만약 지정하지 않으면 타입스크립트 컴파일러가 자동으로 타입을 추론한다. 그래서 타입스크립트의 추론기능은 중요한 것 중 하나이다. 타입이란, 해당 변수가 할 수 있는 일을 결정하는 것이다. 자바스크립트에서는 함수 사용법에 대해 오해가 종종 발생하곤 한다. // 함수f2의 결과를 NaN으로 의도한게 아니라면, 이 함수의 작성자는 매개변수 a가 number타입이라는 가정으로 작성했을 것이다. function f2(a){ return a*38 } //사용자가 사용법을 숙지하지 못하고 문자를 사용하면 NaN이 나와 .. 2023. 2. 26. Form 제출 처리하기 이제 위의 form 에서 사용자가 값을 입력하고 제출할 수 있도록 만들어보자. 그리고 들어온 title / amount/ date를 모아서 하나의 객체로 결합해보자. 이 방법을 위해서 에 onClick 이벤트를 달아줄 수 있지만 여기서 데이터를 수신하기 위한 최선의 방법은 아니다. 브라우저에 내장된 기본 동작과 웹페이지에 내장된 폼이 있기 때문이다. 의 type = "submit"으로 설정되어 있는 상태에서 대신 이 버튼이 클릭되게 되면 이 전체 폼 요소는 수신할 수 있는 이벤트를 생략한다. 그래서 에 onSubmit 이벤트르 달아주고 함수를 넣어줘서 폼이 제출될 때 마다 일부 함수를 실행하도록 해준다. 이렇게 만들어 놓고 버튼을 클릭하게 되면 계속해서 페이지가 새로고침되는걸 볼 수 있는데, 브라우저는 .. 2023. 2. 20. 양식 입력 추가하기 지금 현재 만들고 있는 비용추적기에서 또 한 가지 중요한 것은 사용자가 비용을 직접 입력할 수 있게 해주는 것이다. 이를 만들기 위해 또 하나의 컴포넌트를 추가한다. 유저 인풋을 가져오기 위한 NewExpense 컴포넌트를 만든다. 그 안에는 사용자들이 그들의 비용 데이터를 입력할 수 있는 입력창을 렌더링 한다. 이 컴포넌트의 목표는 결국 폼을 반환하는 것인데, 이건 입력값을 위한 폼이다. 그 폼에 스타일을 적용하려고 를 만들어 준뒤 거기에 className을 넣어준다. 스타일링을 위해서 NewExpense.css 파일을 만들고 스타일링을 해준다. 또한 NewExpense.js 파일로 넘어가 css파일을 import 해준다. 부분을 별도의 컴포넌트로 다시 분리해준다. 폼 로직이 그 컴포넌트 안에만 있도록.. 2023. 2. 19. useState 훅 자세히 살펴보기 states는 리액트에서 핵심적인 개념이다. 특정 컴포넌트의 인스턴스를 위해 state를 등록한다. 우리는 Expense컴포넌트에서 ExpenseItem 컴포넌트를 네 번 사용 했다. 이 모든 ExpenseItem들은 별도의 state를 가지는데, 다른 상태와는 분리되어 있다. 물론 ExpenseItem 컴포넌트에서는 이 함수를 한 번 밖에 정의하지 않았지만 Expense 컴포넌트에서 네번을 호출했고, 매번 호출 할때 마다 동일한 방법으로 새로운 별도의 state가 생성되지만 리액트에 의해 독립적으로 관리된다. 그래서 우리가 첫번째 ExpenseItem만 상태를 바꿔도 나머지들은 변화하지 않는다. 왜냐하면 자신들만의 state를 가지고 있기 때문이다 . 컴포넌트별 인스턴스를 기반으로 해서 독립적인 sta.. 2023. 2. 18. 이전 1 2 3 4 5 6 7 ··· 17 다음
