Front-End/React11 React-hook-form & Zod를 사용해보자 유저는 회원가입/로그인 할 때 항상 값을 제대로 입력해주지 않는다.고의고 아니고를 떠나서 그렇다. 숫자칸에 "숫자만 넣으세요" 라고 해도 실수로 글자를 넣을 수 있는 법이니까. React-hook-form 이란? 그래서 프론트 개발자가 막아주는 게 좋다. 틀리면"여기는 숫자만 들어가야 해요" , "여기선 문자만 쓸 수 있어요" 이 역할을 해주는 게 React-hook-form이다.서버에 전송하기 전에 한번 걸러주는 필터 같은 친구다. import React from "react";import { useForm } from "react-hook-form";const MyForm = () => { const { register, handleSubmit, formState: { errors .. 2025. 1. 3. 병렬 패칭 , Suspense 예를 들어 4초가 걸리는 비동기통신 자료가 있다고 하자.4초동안 걸리는 이유는 직렬로 비동기를 돌려서 그런거라고 하자.그냥 그렇다고 하자.이런 경우엔 시간 단축을 할 수 있다.병렬로 데이터를 받는 것이다. Promise.all을 사용하면 된다. Promise.all: 만약 하나라도 거부되면 전체가 거부된다. try , catch문 사용하면 문제 없음.// 두 개의 API 엔드포인트를 호출하여 결과를 병렬로 받아오는 함수async function fetchParallel() { // 첫 번째 API와 두 번째 API 엔드포인트 const url1 = 'https://api.example.com/data1'; const url2 = 'https://api.example.com/data2'; .. 2024. 7. 30. 서버 띄우는법 , http통신 json-server라는 놈을 사용한다.다운 방법https://www.npmjs.com/package/json-server json-server[](https://github.com/typicode/json-server/actions/workflows/node.js.yml). Latest version: 1.0.0-beta.1, last published: 2 months ago. Start using json-server inwww.npmjs.com이쪽에 들어가서 보면 된다.1.일단 라이브러리 설치한다.npm install json-.. 2024. 7. 26. Context API 어떤 상태(state)를 전체적으로 공유하기 위함이다. 3가지만 기억하면 된다.1.createContext 만들기2.Provider(껍데기) 만들기3.내가 쓸 곳에 씌워주기. 1.createContext 만들기const UserContext = createContext(초기값) 2.껍데기 만들기export default function AtuhProvider({children} : {children : Type}) {안에서 state와 state함수 return ( {children} )} 3.내가 쓸 곳에 놓기.//app.tsx 심화적으로 보겠다.import { createContext, useState } from "react";import getAuthDataFromLocalSto.. 2024. 7. 26. 메모이제이션 리액트는 상위 컴포넌트의 sate가 업데이트가 되면 그 하위 컴포넌트까지 제렌더링 된다.함수가 다시 호출되고, 값을 다시 부른다는 뜻이다.이렇게 되면 에너지 낭비이기 때문에 리액트에선 3가지 훅을 제공한다.이 3가지 훅은 값이나 함수를 메모리에 저장해 자원을 아낄 수 있다. useCallback(함수),useMemo(값),useReducer 각각 하나씩 살펴보겠다. useCallback 두가지 인자를 받는다.1.메모이제이션2.의존성 배열의존성 배열의 값이 변경되지 않는 한 , 동일한 함수 인스턴스를 반환한다. 사용방법const 변수선언 = useCallback(()=>{},[])const increment = useCallback(()->{ //이 함수 내부에서 발생하는 일이 //굉장히 비용이 많이 발.. 2024. 7. 26. 리액트 불변성 State나 props 같은 데이터를 변경할 때 ,기존 데이터를 직접 수정하지 않고 새로운 데이터를 생성하여 대체하는 것 불변성을 지켜야 하는 이유 - 가상 DOM의 효율성 - 이전상태 , 현재상태를 쉽게 비교해 변경 된 부분만 찾아내고 , 최소한의 DOM 조작이 가능하다. - 예측 가능성 : 상태 변화를 추적하기 쉽고 어떤 부분이 변경되었는지 파악하기 쉽다. - 데이터 흐름 단순화 : 데이터 흐름이 단순해지기에 앱의 안정성을 높일 수 있다. 지키는 방법1.객체나 배열을 직접 수정하지 않기새로운 객체를 생성하여 값을 복사 , 변경해야 할 부분만 수정한다.스프레드 연산자를 사용해 기존 객체를 복사하고 , 변경할 부분을 추가하거나 수정한다. 2.불변성을 보장하는 함수 사용map , filter , r.. 2024. 7. 25. 이전 1 2 다음
