본문 바로가기

📚 FrontEnd -Study/TypeScript5

TypeScript React에서 useRef의 3가지 정의 ✅ UseRef? useRef는 React Hook의 일종으로, 인자로 넘어온 초깃값을 useRef 객체의 .current 프로퍼티에 저장합니다. DOM 객체를 직접 가리켜서 내부 값을 변경하거나 focus() 메소드를 사용하거나 하는 때에 주로 사용하고, 변경되어도 컴포넌트가 리렌더링되지 않도록 하기 위한 값들을 저장하기 위해서도 사용됩니다. (이는 useRef가 내용이 변경되어도 이를 알려주지 않기 때문입니다. .current 프로피터를 변경시키는 것은 리렌더링을 발생시키지 않고, 따라서 로컬 변수 용도로 사용할 수 있습니다.) 📦 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다. 위의 말은 useRef의 반환 타입인 MutableRefObject와.. 2024. 1. 24.

[TS] 지정된 데이터 객체에 대한 ~유효한 키인지 TypeScript가 추론할 수 없기 때문에 발생합니다. Element implicitly has an 'any' type because expression of type 'keyof AboutSecondPageDetailType' can't be used to index type '{ agency: string; date: string; subtitle: string; detail: string[]; } | { agency: string; date: string; subtitle: string; detail: string[]; } | { agency: string; date: string; detail: string[]; }'. Property 'education' does not exist on type '{ agency: string; date: stri.. 2024. 1. 3.

[typescript 열거형,인터페이스,type,class] 열거형 enum NumberColor { RED = 0, GREEN = 1, BLUE = 2, }; enum StringColor { RED = 'red', GREEN = 'green', BLUE = 'blue', }; 인터페이스 // Todo 인터페이스를 작성합니다. interface Todo { id: number; content: string; isDone: boolean; } // Todo 인터페이스를 타입으로 받는 todos를 완성합니다. let todos: Todo[] = []; // Todo 인터페이스를 타입으로 받는 addTodo를 완성합니다. function addTodo(todo: Todo) { todos = [...todos, todo]; } // Todo 인터페이스를 타입으로 받는 .. 2023. 5. 31.

[typescript 타입] 1. 기본 타입 interface kimcoding { name: string; age: number; } interface parhacker { name: string; age: string; } function printAge(person: kimcoding | parhacker) { let age; if (typeof person.age === 'number' || typeof person.age === 'string') { age = person.age.toString(); } console.log(`${person.name}의 나이는 ${age}살 입니다.`); } const kimcoding = { name: '김코딩', age: 30, }; const parhacker = { name: '박.. 2023. 5. 30.

[typescript 프로젝트 환경 구축] TypeScript 환경 구성 1. 프로젝트를 생성합니다. mkdir (폴더명) cd (폴더명) 2. 프로젝트 폴더를 생성하고 폴더 안으로 이동한 뒤, 터미널에서 npm init -y 명령어를 실행해 새로운 프로젝트를 초기화 합니다. npm init : 새로운 Node.js 프로젝트를 시작할 때 사용 -y : 모든 질문에 대해 자동으로 기본값인 "yes"로 응답하게 된다. 즉, 사용자의 입력 없이 빠르게 초기화된 package.json 파일을 생성할 수 있습니다. 3. 프로젝트 내부에서 npm 을 사용할 준비가 되었으므로, 이제 TypeScript를 설치합니다. npm install typescript --save-dev npm install [패키지명] --save-dev : package.json 파.. 2023. 5. 30.

이전 1 다음

728x90

티스토리툴바