[원티드프리온보딩] 220512

이 상황이 기묘하다. 일단 되게해놓고 이게 왜 되는지 찾아보는 상황이 기묘하다...😭
근데 다음 진도를 나가려면 알아야한다...

useRecoilState(state)

생긴것부터 기묘하게 생김 거기에 한국어 번역도 기묘하게 해놓음

function useRecoilState<T>(state: RecoilState<T>)
	: [T, SetterOrUpdater<T>];

type SetterOrUpdater<T> 
	= (T | (T => T)) => void;

• state: an atom or a writeable selector.
  Writeable selectors are selectors that have both a get and set in their definition while read-only selectors only have a get.

Returns a tuple where the first element is the value of state
second element is a setter function

This API is similar to the React useState() hook

It returns a tuple of the current value of the state and a setter function.

The setter function take a new value as an argument || updater function which receives the previous value as a parameter.

This is the recommended hook to use when a component intends to read and write state.

useRecoilValue(state)

혼돈의 도가니 useRecoilState나 useRecoilValue나 흠 뭐가 다르지 싶었음 State나 Value나

function useRecoilState<T>(state: RecoilState<T>)
	: [T, SetterOrUpdater<T>];

function useRecoilValue<T>(state: RecoilValue<T>)
	: T;

놉 다시보자

function useRecoilValue<T>(state: RecoilValue<T>): T;

• state: an atom or selector

Returns the ✌️value of the given Recoil state✌️

This is the recommended hook to use when a component intends to read state without writing to it,
as this hook works with both read-only state and writeable state.

Atoms are writeable state while selectors may be either read-only or writeable.

useSetRecoilState(state)

또다른 도가니 난 정말 쓸때마다 이게 맞나 문서 보면서 쓰는중
이름이 다 비슷비슷해정말

function useSetRecoilState<T>(state: RecoilState<T>)
	: SetterOrUpdater<T>;
    
type SetterOrUpdater<T> 
	= (T | (T => T)) => void;

• state: writeable Recoil state (an atom or a writeable selector)

Returns a setter function for updating the value of writeable Recoil state (asynchronously)

This is the recommended hook to use when a component intends to write to state without reading it.

Using useSetRecoilState() allows a component to set the value without subscribing the component to re-render when the value changes.

---

recoil에서 준 허접한 예제 말고 좀 더 구체적인 예제를 찾아나섰다

https://velog.io/@yiyb0603/TypeScript-React-Recoil을-이용한-TodoList-만들어보기

const [todos, setTodos] 
	= useRecoilState<ITodoTypes[]>(todosState);

const setTodos 
	= useSetRecoilState<ITodoTypes[]>(todosState);

아하! useSetRecoilState = setter 지정해주는 부분인데
그치 setter를 분리해줘도되지
기묘하게 표기해놓고 예시는 안준 부분.... 근데 번역도....


멘토님 코드를 보자 hooks에 이 부분이 들어가있다.

import { 블라블라 } from 'recoil'
export { 블라블라 }
export type { 블라블라 }

export function useRecoil<T>(recoilState: RecoilState<T>): [T, SetterOrUpdater<T>, Resetter] {
  const [value, setter] = useRecoilState(recoilState)
  const resetter = useResetRecoilState(recoilState)
  return [value, setter, resetter]
}

하하 자꾸 헷갈리는 부분만 정리해뒀는데 아이패드로 적으면서 정리하는게 사실 기억이 더 잘남음ㅋㅋㅋㅋㅋㅋ
근데 개발새발 글씨라서 올리진 못하겠꼬우
오늘 꿈에서도 어떻게 개인과제 해결하면 좋을지 생각해봤다
아침에 전화받고 일어날때까지만 해도 기억했는데 전화받고 일보고 끊으니까 다까먹음 누가 아침부터 전화하래....😭