seunghyun Note

Recoil & react-hook-form recoil 과 React-hook-form 을 이용한 간단한(?) to-do list를 복습해보려고 한다. 기본적인 파일구조 ├── App.tsx ➡️ 주요 애플리케이션 컴포넌트가 위치 ├── atoms.tsx ➡️ Recoil이나 다른 상태 관리 라이브러리를 사용할 때 상태들의 정의를 담당 ├── components │ ├── CreateTravel.tsx ➡️ 여행 항목을 생성하는 데 사용 │ ├── Travel.tsx ➡️ 여행 항목을 표시하고 해당 항목에 대한 작업을 수행 │ └── TravelList.tsx ➡️ 여행 항목들을 리스트 형태로 표시 └── index.tsx 일단 이 파일 구조를 이해하기 위해서는 원리를 그리면서 접근을 했다. (inte..

기존에 사용했던 제어 컴포넌트들의 반복되는 코드들과 유효성 검증을 한다면 코드가 점점 길어질 것이다. react에서 컴포넌트 리랜더링이 발생하는 조건 중 하나는 state가 변했을 때이다. 폼에서는 모든 값이 state로 연결되어 있으면 하나의 값이 변할 때 마다 여러개의 자식 컴포넌트들에서 무수히 많은 리랜더링이 발생한다. (즉 불필요한 렌더링이 반복된다) react-hook-form install npm i react-hook-form useForm() 을 사용해서 회원가입 form 만들기 const { register, watch } = useForm(); useForm() 안에는 여러가지 옵션들이 있다. register : register function은 많은 요청들을 해결해주고 handler ..

개인적으로 공부할 것들이 많은 react의 개념들을 정리해보려고 한다. 오늘은 recoil! 공식문서와 블로그를 참고했다. https://recoiljs.org/ko/docs/introduction/getting-started Recoil 시작하기 | Recoil React 애플리케이션 생성하기 recoiljs.org start Recoil make react app npx create-react-app my-app install npm install recoil Recoil Root recoil상태를 사용하는 컴포넌트는 부모에 RecoilRoot가 필요하다. import React from "react"; import { RecoilRoot } from "recoil"; import { RecoilRo..

UseState 값을 바꾸거나 컴포넌트의 상태를 간편하게 생성하고 업데이트 해주는 도구 const [state,setState] = useState(초기값); 현재 데이터를 fetching이 되지 않을 때 로딩을 구현하는 중인데 useState를 사용한다. //setLoading을 통해 상태를 변경할 수 있고 loading에 저장된 값을 받는다. const [loading,setLoading] = useState(true); //setLoading에 변화를 주면 loading에 저장 setLoading(false); // loading => false UseEffect 데이터를 가져왔을 때 한번만 실행하고 싶을 때 사용중이다.(조건을 넣어서 클릭 시, 입력 시 등 다양한 방법이 있는데 fetching을 ..