Frontend/TypeScript14 [ 타입스크립트(TypeScript) ] 이중 반복문에서 반복문 순회 후 타입 강제하기 📍 이중 반복문에서 반복문 순회 후 타입 강제하기 언뜻 제목만 봐서는 이해하기 힘들 수 있지만, 쉽게 말해 타입이 2개 이상인 data에서 find를 통해 나온 값에 원하는 property만 추출하고 싶을 때 해당 타입을 assertion 방법이다. 이미 data에 타입이 정해져 있는 경우라면 굳이 type assertion 해야되나?라고 생각할 수 있지만, API요청을 통해 받은 값(data)의 타입이 2개 혹은 2개 이상으로 설정되어있고, 내가 사용하고 싶은 property가 각각의 타입에 공통으로 들어있지 않은 property인데, 한쪽 타입의 property만 추출하면 컴파일 에러가 나는 경우 해결방법에 대해 글을 작성했다. 한 가지 예시를 통해 살펴보자. API를 통해 받은 값 data 값이 있.. 2022. 7. 3. [ 타입스크립트(TypeScript) ] 비구조할당문법에 type 선언하기 📍 비구조 할당 문법에 type 선언하기 코드의 가독성을 높이기 위해 객체나 배열로 된 변수에 비구조화 할당 문법(destructuring assignment)을 사용할 때가 자주 있다. typescript로 비구조화할당 문법을 사용하면 변수로 꺼낸 값에 타입을 정해주는 경우를 마주하는데 object형은 가끔 타입을 어떻게 정해야 하는지 헷갈리곤 한다. 이번 글은 거창한 글보단 미세먼지처럼 작은 팁이지만 종종 헷갈릴 때 도움이 되므로 가벼운 마음으로 읽어보자. 하단 코드블록에 나와있듯이 user를 구조분해할당 이후 타입을 잘못 선언하는 경우는 AS-IS처럼 사용한다. 하지만, 저 문법은 타입을 정해주는 문법이 아니라, 객체의 원래 속성명을 다른 이름으로 할당하는 문법이다. 여기선 string으로 바꾼다는.. 2022. 6. 21. [ 타입스크립트(TypeScript) ] Formik으로 input state 쉽게 관리하기 📍 Formik으로 input state 쉽게 관리하기 이전 글에서 2개 이상의 useState를 하나로 묶어 input을 구현했었다. 그런데, input이 필요할 때마다 useState로 생성하여 관리하고, 타입이 여러 가지일 때 매번 그에 맞는 handleChange를 구현하는것은 상당히 번거롭다고 생각했다. 다른 개발자들도 이미 같은 생각을 했는지, 관련 라이브러리가 이미 존재하고 있었다. Formik과 React Hook Form 라이브러리인데, 오늘은 Formik에 대해서 자세하게 알아보자. Formik은 React에서 Form을 구현할 때 가장 성가신 세 가지를 도와주는 라이브러리이다. 1. 양식 상태 안팎에서 값 가져오기 2. 유효성 검사 및 오류 메시지 3. 양식 제출 처리 위의 모든 경우.. 2022. 5. 27. [ 타입스크립트(TypeScript) ] 2개 이상의 동일한 기능인 useState와 handleChange를 각각 하나로 관리하기 📍 2개 이상의 동일한 기능인 useState와 handleChange를 각각 하나로 관리하기 구독신청 페이지를 만들면서 개인정보수집 checkbox와 광고성 정보 수신 input checkbox를 useState로 관리하려고 하는데, 여러 개의 useState로 선언하여 관리하니까 코드가 불필요하게 길어져 좋은 코드라고 보기 힘들었다. 그래서 기존에 const [state, setState] = useState(false)처럼 선언했다면 이를 object로 묶어 선언하니 코드가 줄어들었다. import { useState } from "react"; // 리팩토링 전 export default function Subscription() { const [allAgree, setAllAgree] = use.. 2022. 5. 16. [ 타입스크립트(TypeScript) ] object(key:value) type, interface 선언하기 📍 object(key:value) type, interface 선언하기 TS를 사용하다가 string, number, boolean, array와 같은 자료형에는 type을 잘 선언할 수 있었는데, 유독 key:value와 같은 object는 type을 어떻게 선언해야 하는지 헷갈렸다. 나는 이때까지 key:value형태의 object는 다음과 같이 선언했다. interface PostType{ sort: string; } const post: PostType = {sort: "asc"} console.log(post); 👉🏽 { sort: 'asc' } ReactQuery를 사용하여 useInfiniteQuery를 구현하는 도중 함수 parameter로 반환되는 key:value 형태인 post값의 .. 2021. 8. 31. 이전 1 2 3 다음
