반응형 Web Front 개발공부57 리액트 훅 정의 * 리액트 훅 정의용도훅데이터 컴포넌트 관리useMemouseCallbackuseStateuseReducer컴포넌트 생명 주기useEffectuseLayoutEffect컴포넌트 메서드 호출useRefuseImperativeHandler컴포넌트 정보 공유useContext 2024. 11. 9. 리액트 타입스크립트 props 리액트 타입스크립트 props 리액트 + 타입스크립트 프로젝트에서 props를 사용하는 방법 타입과 인터페이스를 매개변수로 사용할 수 있는데 관련 기록 1. props를 3가지 타입을 받는 PropsTest라는 컴포넌트를 작성.import React from 'react';type paramType = { year: number, dept:string, imType:string}//props가 타입(인터페이스도 존재)일 경우..const PropsTest = ({year,dept,imType}:paramType) => { return ( 년도 : {year} 부서: {dept} 종류: {imType} .. 2024. 8. 28. VSCODE github 연동설정 VSCODE github 연동설정 vscode를 설치 한 후, github에 만든 소스를 손쉽게 업로드하는 방법을 알아보도록 한다. 상당히 간단하다. git과 github는 서로 다른 기능의 소프트웨어란 것을 기억하길 바라고. 우선 git을 내 로컬 컴퓨터에 설치 해야 한다. 이후 github 사이트에 들어가 계정을 만들고 vscode로 연동 한다. 1. git을 로컬 컴퓨터에 설치한다. (윈도우로 예시)https://git-scm.com/download/win Git - Downloading PackageDownload for Windows Click here to download the latest (2.46.0) 32-bit version of Git for Windows. This is the .. 2024. 8. 4. 컴포넌트 props 간단예제 import React from 'react';// 이름 없는 함수로 컴포넌트를 정의하고, Text라는 변수에 대입한다// Text 컴포넌트는 부모로부터 'content' 라는 데이터를 받는다.const Text = (props: {content: string})=>{ // props로 부터 cntent라는 값을 꺼낸다. const {content } = props; // props로 전달된 데이터를 표시한다. return {content}}const Message = (props:{}) => { const content1 = 'This is parent component'; const content2 = 'Message uses Text Component'; ret.. 2024. 7. 14. 타입스크립트 배열과 제네릭 타입스크립트 배열과 제네릭// T는 클래스 안에서 사용하는 임시 타입 이름이다.class Queue{ // 내부에서 T 타입의 배열을 초기화 한다. private array: T[] = []; // T 타입의 값을 배열에 추가한다. push(item: T){ this.array.push(item); } // T 타입의 배열의 첫 번째 값을 꺼낸다. pop(): T | undefined{ return this.array.shift(); }}const quene = new Queue(); // 숫자 타입을 다루는 큐를 생성한다.quene.push(123);quene.push(456);quene.push(789);console.log('제네릭.. 2024. 7. 14. 타입스크립트 기본 - Class와 Enum 타입 회사에서 다음 프로젝트로 리액트를 사용하기로 했는데... 오잉 타입스크립트를 함께 사용한다. 타입스크립트가 무엇인지는 5~6년 전에 얕게 흩어보아 잘알고 있다. 리액트에서 사용할 때 큰 문제가 없도록 간단하게 공부하고 메모를 남긴다.1. Class티스트토리 코딩 첨부하기에 TypeScript가 생기다니 이런 좋은일이~~~자바와 별반 다르지 않다. 다만 this 를 반드시 써야 에러가 안난다.interface IUser{ name:string; age:number; sayHello:()=> string; //인수 없이 문자열 반환}class User implements IUser{ name: string; age: number; constructor(){ thi.. 2024. 7. 14. 이전 1 2 3 4 ··· 10 다음 반응형
