리액트,타입스크립트

커스텀 훅(Custom Hook)은 리액트 함수 컴포넌트에서 상태 관리, 사이드 이펙트 처리 등을 추상화하여 재사용 가능한 로직 단위로 만들어진 것이다. 이를 통해 코드 중복을 줄이고 가독성을 높이며, 복잡한 컴포넌트를 간결하게 유지할 수 있다. 커스텀 훅을 만들어서 반복되는 로직을 재사용하는 방법을 알아본다. num1과 num2 라는 변수가 있는데 이 두 변수의 값을 방향키로 1씩 증가시키거나 감소시키는 기능을 만들려고 한다. 어떤 변수를 조작할 것인지 선택하는 버튼이 있어서 이 버튼을 클릭할 때마다 조작하는 변수를 전환한다. useKey.tsx import { useState, useEffect, useCallback, Dispatch, SetStateAction, } from "react"; fun..

tailwind 공식 홈페이지에 설치방법이 나와있다.(https://tailwindcss.com/docs/installation) 프로젝트 폴더에서 다음 명령어를 입력한다. npm install -D tailwindcss npx tailwindcss init 그럼 프로젝트에서 tailwind를 설정할 수 있는 파일인 tailwind.config.js파일이 생긴다. content 부분에 tailwind를 적용할 파일들을 설정해준다. "./src/**/*.{html,js,jsx,ts,tsx}" 프로젝트의 src/index.css 파일의 맨 위에 아래 세줄을 추가해준다. @tailwind base; @tailwind components; @tailwind utilities; 그리고 프로젝트를 실행하면 tail..

타입스크립트에서 axios로 파일다운로드를 구현하는 방법을 알아본다. axios 설치 npm install axios 파일다운로드는 file-saver 패키지를 사용하면 쉽게 만들 수 있다. npm install --save @types/file-saver 폴더 구조는 이렇다 전체 코드는 이렇다. import axios, { AxiosResponse } from "axios"; import * as FileSaver from "file-saver"; const DownloadFile: React.FC = () => { //Excel download const downloadExcel = async () => { try { const response: AxiosResponse = await axios.po..

리액트에서 전역적인 상태 관리를 위해서는 리덕스를 사용해야 한다. 리덕스만 사용하는 방법과 리덕스 툴킷을 사용하는 방법 모두 알아본다. 프로젝트 디렉토리 구조 리덕스만 사용하는 방법 리덕스 패키지 추가 npm install react-redux npm install redux 먼저 리듀서 함수와 리덕스의 초기 상태를 정의해야 한다 const initialState = { id: "aaaa", pwd: "1234", }; function userReducer(state = initialState, action: any) { switch (action.type) { case "userID": { return { ...state, id: action.payload.id, }; } case "userPwd": ..

다음의 명령어로 리액트 앱을 타입스크립트로 만든다. npx create-react-app my-app --typescript 실행이 되면 프로젝트 루트 디렉터리에 tsconfig.json 파일을 만들고 기본적인 설정을 해준다. { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch":..

구글맵에서 마커를 찍기 위해선 마커 객체를 생성할 때 마커를 띄울 구글맵 객체(map)를 인자로 줘야 합니다. const marker = new google.maps.Marker({ icon: { url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png", }, position: location, map, }); 마커의 위치를 지정하는 position 속성에 현재 위치의 위도/경도 값을 지정해줍니다. 현재 위치는 geolocation api를 통해 얻었습니다. navigator.geolocation.getCurrentPosition((position) => { const location = { lat: position.coords.latitude, ln..

https://devkkiri.com/post/2a105ee2-112e-4d15-9dc0-a3a7b6f2adcf 리액트에서 Google Map Api 사용하기 | Kkiri Blog 웹제작을 하다보면 지도를 연동해야 하... devkkiri.com