[React JS 마스터클래스] State Management

Recoil은 React JS에서 사용할 수 있는 상태관리 라이브러리

npm install recoil

 

Atom은 상태의 일부를 나타내는데 어떤 컴포넌트에서나 읽고 쓸 수 있다

각각의 atom 안에는 우리가 원하는 어떤 value든 저장할 수 있다

어떤 component에서 어떤 value에 접근하려면 component를 직접 atom에 연결하면 된다

전역 상태를 어플리케이션의 분리된 공간에서 관리하는 것이 훨씬 나은 방법

 

react-hook-form

npm install react-hook-form

 

const { register } = useForm();

register 함수를 사용하면 onChange 이벤트, value, useState 모두 필요 없다

 

<input {...register("toDo")} placeholder="Write a to do" />

register 함수가 반환하는 객체를 가져다가 input에 props로 주는 것

 

watch는 우리가 form의 입력값들의 변화를 관찰할 수 있게 해주는 함수

handleSubmit은 2개의 인자를 받아 하나는 데이터가 유효할 때 호출되고 다른 하나는 데이터가 유효하지 않을 때 호출되는 함수

 

useRecoilState

첫 요소가 상태 값, 두 번째 요소가 호출되었을 때 주어진 값을 업데이트하는 setter 함수인 튜플 리턴

암묵적으로 주어진 상태에 컴포넌트를 구독한다

 

useRecoilValue: state값을 리턴
useSetRecoilState: setter 함수를 리턴
useRecoilState: state, setter 함수를 모두 리턴

 

findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스 반환

만족하는 요소가 없으면 -1 반환

 

Enums

열거형으로 이름이 있는 상수들의 집합 정의 가능

TypeScript는 숫자와 문자열 기반 열거형을 제공한다

// 숫자 열거형 (Numeric enums)
enum Direction {
Up = 1,
Down,
Left,
Right,
}

// 문자열 열거형 (String enums)
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT",
}