programming study/React (37) 썸네일형 리스트형 Hook 규칙, Custom Hook 1. Hook 규칙 최상위에서만 Hook을 호출 반복문, 조건문, 중첩된 함수에서 Hook 호출하지 말 것 조건문을 Hook내부에 사용하는 것은 가능(useEffect) 이 규칙을 따라야 동일한 순서로 Hook 호출되는 것이 보장 React 함수 내에서만 Hook을 호출 JavaScript 내에서 호출하지 말 것 규칙을 지켜야하는 이유 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있음 2. Custom Hook 컴포넌트 로직을 함수로 뽑아 재사용 공통의 로직을 뽑아내 새로운 함수를 만드는 것으로 작동 방식과 순서에는 변화가 없음 관습적으로 use prefix를 붙일 것 같은 Hook을 사용하는 컴포넌트들은 state를 공유하지 않음 서로 독립된 state를 받음 기존의 Hook과 동일하게.. Effect Hook 사용하기(2) 1. Clean-up Effects vs. non-clean-up Effects side effect를 실행 하고 나서 후처리가 필요한 경우가 있음 Clean-up이 필요한 경우 외부 데이터를 구독하는 경우 addEventListener를 지정한 경우 why? 메모리 누수 방지를 위해 Clean-up이 필요하지 않은 경우 API 호출 DOM 수동 조작 로깅 effect에서 함수를 반환하는 이유 effect를 위한 추가적인 정리 메커니즘 effect의 추가와 제거 로직을 가까이 묶을 수 있음 React가 effect를 정리(Clean-up)하는 시점 컴포넌트가 마운트 해제되는 때에 정리(Clean-up) 실행 Clean-up Effects 예시 event listener를 Clean-up Class Com.. Effect Hook 사용하기(1) 1. useEffect의 역할 함수 컴포넌트에서 side effect를 수행 side effect 데이터 가져오기(API 호출) 구독 설정하기 수동으로 React 컴포넌트 DOM을 수정 정리(Clean-up)가 필요한 것, 필요하지 않은 것 두 종류가 있음 useEffect는 class 생명주기의 componentDidMount + componentDidUpdate + componentWillUnmoun를 합친 것으로 보아도 됨 React Component가 렌더링되기 전에는 side effect를 실행하지 않음 why? 이 시점은 이른 시기로서 React가 DOM을 업데이트하고 난 이후에 실행해야 함 2. useEffect가 하는 일 React에게 컴포넌트가 렌더링된 이후에 어떤 일을 수행해야하는 지를.. React Hook Form(2) 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. watch 등록한 input의 변화를 감지하고 해당 값을 반환할 수 있음 첫 번째 파라미터는 register로 등록한 input name 2. handleSubmit 입력한 input data들의 유효성 검사가 성공하면 form data를 받음 첫번째 인자 valid 함수 form 데이터가 유효할 때만 호출되는 함수 두번째 인자 form 데이터가 유효하지 않을 때 호출되는 함수 예시 // form datas의 interface를 전달받게 되므로 타입 지정 const onValid = (data: IOrderForm) => { // submit 되기 전의 data validation을 정의 if (data.. React Hook Form(1) 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. React Hook Form? React에서 Form을 간단하게 다룰 수 있게 하는 라이브러리 많은 input 요소를 효율적으로 관리할 수 있음 Validation 지원 2. useForm form을 사용하기 위한 함수들을 return하는 hook register: input을 등록 watch handleSubmit formState setError setValue 예시 TypeScript와 함께 사용할 때는 제네릭으로 form data의 interface를 전달해야 함 import React from "react"; import { useForm } from "react-hook-form"; // .. Recoil(2) 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. useRecoilState value, modifier 함수를 반환 예시 import { atom, useRecoilState } from "recoil"; interface IOrderList { product: string; id: number; status: "배송전" | "배송중" | "배송완료"; } // atom 정의할 때 제네릭으로 인터페이스를 전달 const orderList = atom({ key: "orderList", default: [], }); function OrderListPage() { // value, modifier 함수를 반환 const [orderList, .. Recoil(1) 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. Recoil 이란? React JS에서 사용할 수 있는 state management library 여러 컴포넌트에서 전역적인 상태값에 접근 또는 변경할 수 있음 ex) 다크 모드, 로그인 상태(인가) 전역 상태관리 없이 전역적인 상태값을 사용하려면 props Drilling이 일어날 수 있음 props Drilling: 하위 컴포넌트로 상태를 넘기기 위해 props를 그 컴포넌트까지 여러번 넘겨야 하는 것 규모가 큰 앱일수록 하위 컴포넌트가 많아지고 이 컴포넌트들에 상태를 props 전달을 위한 코드를 반복적으로 써야 함 문제의 원인 파악에도 어려움 2. atom 상태의 일부를 나타냄 어떤 컴포넌트에서.. React Query(2) - 사용 예시, Query Key, TypeScript 적용 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. React Query 사용 예시 useQuery Data를 Fetching할 때 사용하는 React Query Hook 파라미터는 대표적으로 세 가지 queryKey: query의 고유 식별자 Fetcher Function: API를 호출하여 Data를 받아오는 함수, Promise를 return해야 함 options: 쿼리에 대한 옵션. refetchInterval과 같은 것을 설정 가능 return하는 값은 대표적으로 두 가지 isLoading: 로딩 상태를 나타내는 Boolean data: Fetching에 성공해서 받아온 data useQuery를 사용하면, 기존에 API를 불러오고 상태를 최신화.. 이전 1 2 3 4 5 다음