Front-End/React (11) 썸네일형 리스트형 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 .. 병렬 패칭 , 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'; .. 서버 띄우는법 , 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-.. 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.. 메모이제이션 리액트는 상위 컴포넌트의 sate가 업데이트가 되면 그 하위 컴포넌트까지 제렌더링 된다.함수가 다시 호출되고, 값을 다시 부른다는 뜻이다.이렇게 되면 에너지 낭비이기 때문에 리액트에선 3가지 훅을 제공한다.이 3가지 훅은 값이나 함수를 메모리에 저장해 자원을 아낄 수 있다. useCallback(함수),useMemo(값),useReducer 각각 하나씩 살펴보겠다. useCallback 두가지 인자를 받는다.1.메모이제이션2.의존성 배열의존성 배열의 값이 변경되지 않는 한 , 동일한 함수 인스턴스를 반환한다. 사용방법const 변수선언 = useCallback(()=>{},[])const increment = useCallback(()->{ //이 함수 내부에서 발생하는 일이 //굉장히 비용이 많이 발.. 리액트 불변성 State나 props 같은 데이터를 변경할 때 ,기존 데이터를 직접 수정하지 않고 새로운 데이터를 생성하여 대체하는 것 불변성을 지켜야 하는 이유 - 가상 DOM의 효율성 - 이전상태 , 현재상태를 쉽게 비교해 변경 된 부분만 찾아내고 , 최소한의 DOM 조작이 가능하다. - 예측 가능성 : 상태 변화를 추적하기 쉽고 어떤 부분이 변경되었는지 파악하기 쉽다. - 데이터 흐름 단순화 : 데이터 흐름이 단순해지기에 앱의 안정성을 높일 수 있다. 지키는 방법1.객체나 배열을 직접 수정하지 않기새로운 객체를 생성하여 값을 복사 , 변경해야 할 부분만 수정한다.스프레드 연산자를 사용해 기존 객체를 복사하고 , 변경할 부분을 추가하거나 수정한다. 2.불변성을 보장하는 함수 사용map , filter , r.. 코드분석(To-do-list) 오늘은 To-do-list를 만들어봤다. 투두리스트는 기본기(CRUD)에 정말 좋은 예제라고 생각한다. 어떤 기능인지 살펴보면 ,인풋창에 데이터를 입력하고 버튼을 누르면 밑에 목록이 생기고 ,체크를 하면 밑줄이 처진다.X를 누르면 해당 컴포넌트가 삭제된 것처럼 보이는 기능이다. (현재 서버 없이 혼자 만드는 것이기 때문에 API에 요청을 보내진 않는다.) 전체적으로 보겠다.투두 리스트를 담은 배열 안에,정보들이 담긴 객체가 한덩이 한덩이 있어야 한다.객체 안엔 {id,text , checked}의 앖이 들어가야 한다.그러니까 최종으로 보면 이런 느낌이다. [ {id : 유니크한 값, text : 내가 쓴 내용, isCompleted : true & false} , {id : 유니크한 값, text .. 조건부 렌더링 조건부 렌더링은 특정 조건에 따라 다른 결과를 보여주는 것if문 , 삼항 연산자 , 논리 연산자(&&) if문 if (isLoggedin) { return 로그인 성공; } return ( 실패! );} 삼항 연산자 true false에 따라 결과를 다르게 보여주는 것export default function App() { const isLoggedin = false; return {isLoggedin ? "로그인 성공" : "로그인 실패"};} 논리연산자(&&)해당 조건이 참일때만 보여주는 것export default function App() { const isLoggedin = false; return {isLoggedin && "로그인 성공" };} 이전 1 2 다음
