TypeScript6 리액트로 슬라이드 만들기 2 + typescript 슬라이드의 늪에 빠진 나... 하하 즐겁다. 더 제대로 만들었다면 더 즐거웠을 텐데...? 어쨌든 리액트로 슬라이드 만들기 시작~ 생각한 로직 슬라이더 안의 요소의 사이즈에 기반하여 이동한다. 다음/이전 버튼을 누르면 슬라이드 요소를 감싸는 박스를 이동시킨다. 위치가 0이면 이전 버튼 미노출 슬라이드 요소를 감싸는 박스의 사이즈가 위치 값이랑 같으면 미노출(하지만 이 부분은 개선이 필요..) 작업 설명 현재 슬라이드의 위치를 담을 state를 만든다. const [position, setPosition] = useState(0); 슬라이드로 이동할 값을 정한다. 354 부분은 슬라이드 요소 1개의 가로 사이즈이고, 16은 오른쪽 마진의 값이다. 값을 합해서 370이라고 해도 되지만 각 값의 구분을 위해 .. 2024. 4. 4. [typescript] 교차 타입 Intersection Type 교차 타입 교차 타입(Intersction Type)은 & 기호를 사용하여 여러 타입을 조합하여 하나의 타입으로 만들 수 있다. 객체의 경우 조합한 모든 타입을 가져야하고 하나라도 없을 경우 에러가 발생한다. type Color = { code : string; } type Animal = { name: string; } type Cow = Color & Animal; const brownCor : Cow = { name:'ddd', code:'#693f00' } Color 의 code 타입과 Animal의 name 타입을 조합하여 Cow 타입을 만들었다. 객체가 아닌 경우 객체가 아닌 경우에도 사용할 수 있는데, 공통된 타입으로 판단한다. type T1 = string | number; type T2 .. 2024. 4. 1. react/typescript input checkbox 전체 선택 구현 그동안 프로젝트 진행하면서 구현한 적이 없어서 이번에 연습 삼아 구현하게 되었다. 기능 1. 전체 선택 클릭 시 다른 체크박스 전체 선택/해제 2. 전체 선택 상태에서 다른 체크박스 해제 시 전체 선택 부분도 선택 해제 3. 체크박스 재사용 가능하도록 컴포넌트로 분리 Checkbox 컴포넌트 / Checkbox.tsx 재사용 가능하도록 props를 내려줬다. import React from "react"; const Checkbox = ({ title, name, checked, onChange }: { title: string; name: string; checked: boolean; onChange: React.ChangeEventHandler }) => { return ( {title} ); }; .. 2024. 3. 29. [react + typescript] typescript 를 하면서 지정하게 된 타입들 useRef useRef에 값과 같은 데이터가 아닌 input을 담을 때는 HTMLInputElement 타입을 지정해야한다. const titleRef = useRef(null); const contentRef = useRef(null); form submit form submit의 매개변수 event 를 사용하기 위해서는 e: React.FormEvent 타입을 지정해야 한다. const form = e.target as HTMLFormElement; todo 추가 완료 후 form reset 하기 위해 선언. titleRef.current?.focus(); titleRef 와 contentRef 의 초기값이 null 이기 때문에 옵셔널 체이닝을 사용하여 에러 방지. const titleRef = u.. 2024. 3. 7. 유틸리티 타입 Partial 일부만 만족하면 되는 타입 Required 모든 속성을 필수로 제공해야 하는 타입 Readonly 읽기 전용으로 값을 변경할 수 없는 객체로 만드는 타입 재할당 불가 Pick 타입 T에서 지정한 K 속성들로 새로운 타입을 만드는 타입 type Person = { id: string; name: string; age: number; phone: string; } type PickType = Omit; const Component = ({name, age} : PickType) => { return ... } Omit 타입 T에서 K 속성을 제외한 속성으로 새로운 타입을 만드는 타입 (Pick의 반대) type Person = { id: string; name: string; age: numb.. 2024. 3. 5. typescript 기본 타입 1. boolean true / false 를 나타낸다. 주로 조건문, 비교 연산 등에서 사용된다. 2. number 다른 프로그래밍 언어와 다르게 모든 숫자 타입을 number로 나타낸다. 3. string 텍스트 데이터를 나타낸다. 4. array 값을 배열의 형태로 나타낸다. 나타내는 방법에는 2가지가 있으며 배열 요소들을 나타내는 타입 뒤에 [] 를 사용하는 방법과 제네릭 배열 타입이 있다. let numArr: number[] = [1, 2, 3]; let numArr: Array = [1, 2, 3]; 5. tuple 배열과 비슷하지만, 고정된 타입과 고정된 수를 가진다. (배열은 한가지 타입만 가질 수 있다) 선언된 순서에 맞는 타입을 가진 데이터를 넣지 않으면 에러가 난다. tuple은 아.. 2024. 3. 4. 이전 1 다음
