전체 글139 [React / React Hook Form] Introduce Basic 코드를 간소화 해주는 React Form Library 개요 프론트엔드 개발자가 적지 않은 수작업을 해야 하는 부분이 뭐냐고 물어보면, Form 핸들링 작업이다. 각 Form 아이템에 맞는 수많은 validation, 입력 제한, value를 관리하는 State 등.. 신경써야할 게 많다. 이 요소들을 한 방에 해결하는 것이 React Hook Form 이다. Toss에서도 사용하는 라이브러리이고, 노마드코더 니코도 추천하고 있다. 좀 더 조사해보니까, 대부분의 사람들이 이 라이브러리를 많이 사용하고 있었다. (걍 쓰자...아니야 폼 조작한다고 걍 개고생한번 해보길 추천..그래야 감사함을..) 설치 yarn add react-hook-form 사용방법 const ToDoList = () => { cons.. 2023. 1. 4. [TypeScript] as 사용에 대한 이해 (feat. Type Assertions) 찾게된 이유 & 해결 ... // 에러 상황 data: data?.map(price => Number(price.close)), ... // 발생된 에러 TS2769: No overload matches this call. Overload 1 of 2, '(props: Props | Readonly): ReactApexChart', gave the following error. Type '{ name: string; data: number[] | undefined; }' is not assignable to type 'number'. Overload 2 of 2, '(props: Props, context: any): ReactApexChart', gave the following error. Type .. 2022. 12. 27. [React / Router] Outlet으로 props 전달하기 (feat. useOutletContext) useOutletContext로 받아서 처리하는 방식을 설명한다. URL을 통해 전달하는 방식이면, useParam을 써서 처리하는 방식도 있겠지만, props를 다른 것을 전달할 때도 있으니까, child에게 props 전달할 때는 아래 방식이 더 명확한 것 같다. 1. parent ... { const { coinID } = useOutletContext(); // 이 부분만 확인하면 된다. const { isLoading, data } = useQuery(["ohlcv", coinID], () => getCoinHistory(coinID) ); return isLoading ? loading : Chart; }; export default Chart; JS환경에서는 제네릭을 없애면 된다. 2022. 12. 26. [React / React Query] React Query를 사용하게 되면서 좋은 점들 React Query 공식문서에는 아래와 같이 설명되어 있다. Performant and powerful data synchronization for React 음... 그래. 리액트에 어울리는 동기화 라이브러리 라고 한다. (그래? 한번 써보았다.) 기존 코드 import { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import styled from "styled-components"; import { getCoins } from "APIs/get"; import { useQuery } from "react-query"; // Styled Component 생략 // const Coins = () => { .. 2022. 12. 21. [React / TypeScript] props를 구조분해할당으로 전달받을 때 Type Error (TS2322) 문제상황 TS2322: Type '{ data: ReservationDataType[]; }' is not assignable to type 'IntrinsicAttributes & ReservationDataType[]'. Property 'data' does not exist on type 'IntrinsicAttributes & ReservationDataType[]'. // 부모 컴포넌트 import React from "react"; import RenderComponent from "./RenderComponent"; import type { ReservationDataType } from "interface/interface"; const ReservationList = () => { // .. 2022. 12. 20. [React / Ant Design] Ant Design에서 Calendar Localization 하는 법 Antd ConfigProvider 적용 import React from "react"; import AppLayout from "./components/AppLayout/AppLayout"; import { ConfigProvider } from "antd"; import "dayjs/locale/ko"; // 1번 import koKR from "antd/locale/ko_KR"; // 2번 const App = () => { return ( ); }; export default App; 1번 라인 : Jan~Dec -> 1월 ~ 12월로 표현 바뀜 (세부목록은 json 참고) 2번 라인 : 전체 placeHolder 가 적용되는 것 참고 https://cdn.jsdelivr.net/npm/dayjs.. 2022. 12. 19. 이전 1 ··· 3 4 5 6 7 8 9 ··· 24 다음
