Recoil state

영상 참고자료

리코일유투브 영상

1) 상태관리를 지정할 때 atom

• key, defualt 속성이 반드시 필요
• key는 전역적으로 유일해야함
  2) 사용방법

const [cartItem, setCartItem] = useRecoilState(CartItemAtom)

//값만 사용하는 경우
const state = useReoilValue('값')

//set함수만 사용하는 경우
const setState = useSetRecoilState('값')

상태가 위치할 곳 atom이 떠있을 자리를 설정해줘야 한다.

3) setState함수
배열, 객체와 같은 참조자료형을 사용할 때 원본을 copy 하고 써야함
만약 push 하는 경우 원본데이터마저 변하게 됨

setCartItem = ((prev) => [...prev, data])

// 해당 아이템이 장바구니에 있으면 눌리지 못하게 하기 전에 그 여부를 구분하는 함수
const isAlreadyInCart = cartItem.filter((e) => e.id === id).length

const isAlreayInCart = cartItem.findindex((e) => e.id === id).!== -1

4) selector

const TotalQuantity = cartItem.lenth;
const

• key와 get 메소드가 필요하다
• 기존있던 값을 캐싱해준다

참고자료

리코일

0. 리액트 훅

hook 을 이용하여 기존 class 바탕의 코드를 작성할 필요없이 상태값과 여러 react 기능을 사용할 수 있게 되었다.

1) Hook 등장

• react state와 생명주기를 연동할 수 있게 해준다.
  • hook을 class 안에서 동작하지 않는다.
    • class를 사용하지 않고도 상태를 가질 수 있다
• 함수형 컴포넌트에서 상태값 접근과 자식 요소에 접근이 가능해졌다.
• useState, useEffect :: 내장 hook
• props, state, context, refs, lifecycle : 직관적인 API
  • hook 직접 사용 가능

2) Hook의 사용

• 함수형 컴포넌트에서 this오 render 없이 상태값 접근이 가능해졌다.
• 하나의 컴포넌트 내에서 state hook를 여러개 사용할 수 있다.

3) Hook의 장점

• 컴포넌트로부터 상태관련 로직을 추상화할 수 있다.
  • 독립적인 재사용이 가능하다 (:: 가독성을 높이고 유지보수를 용이하게 함)
• 계층의 변화없이 상태 관련 로직을 재사용할 수 있다.
• 생명주기 메서드를 기반으로 쪼개는 것보다는 훅을 통해 작은 함수의 묶으믕로 컴포넌트를 나누는 방법을 사용할 수 있다.

4) Hook의 규칙

• 최상위에서만 훅을 호출해야하고 훅을 호출하는 항상 같아야한다.
• 함수 컴포넌트 내에서만 hook을 호출해야한다.
  • 일반 js 함수에서는 훅을 호출하면 안됨
  • 직접 작성한 custom hook에서는 사용 가능

1. 리코일

react의 hooks와 어울리면서 react에 필요한 것들만 react스럽게 제작한 상태관리 라이브러리

1) 리코일 사용법

1. recoil 패키지 설치

yarn add recoil

yarn을 이용하여 recoil 패키지 설치

2. RecoilRoot 태그

import React from 'react';
import {
	RecoilRoot,
    atom,
    selector,
    useRecoilState,
    useRecoilValue
} from 'recoil';

function App(){
	return(
    	<RecoilRoot>
        	<CharacterCounter />
        </RecoilRoot>
    )
}

recoil state를 사용할 컴포넌트는 RecoilRoot태그로 감싸주어야 한다.

3. Atom

const textState = atom({
	key: 'textState', 
    default: '',
})

key는 unique ID로 다른 atom 및 selector 와 구별하기 위함에 있다.
default value는 initial value로 초기값이다.

atom은 기존의 상태관리 라이브러리에서 쓰이는 store와 유사한 개념으로 상태의 단위이다
atom이 업데이트 되면 atom을 구독하고 있던 모든 컴포넌트들의 state가 새로운 값으로 리렌더된다.
unique한 id인 key로 구분되는 각 atom은 여러 컴포넌트에서 atom을 구독하고 있다면 그 컴포넌트들도 똑같은 상태를 공유한다.

4. useRecoilState

function CharacterCounter(){
	return(
    	<div>
        	<TextInput />
            <CharacterCount />
        </div>
    );
}

function TextInput() {
	const [text,setText] = useRecoilState(textState);
    const onChange = (event) => {
    	setText(event.target.value);
    };
    
    return(
    	<div>
        	<input type="text" value={text} onChange={onChange} />
            <br/>
            Echo : {text}
        </div>
    )
}

useRecoilState hook 는 atom의 state를 get하거나 set할 수 있다

const [text, setText] = useRecoilState(textState);

다음과 같이 사용하면 text는 textState의 value를 가지게 되고 (get) setTExt는 text의 값을 변경할 수 있다 (set)

5. useRecoilValue와 useSetRecoilValue

function TextInput(){
	const text = useRecoilValue(textState);
    const setText = useSetRecoilValue(textState);
    
    const onChange = (event) => {
    	setText(event.target.value);
    };
}