Recoil-selector

sonnng·2023년 1월 21일
0

React

목록 보기
7/8
post-thumbnail

selector

-> 데이터를 좀더 체계적 방식으로 접근 가능
-> atom에 데이터 모아두고, selector로 변형시킬 수 있다
-> 쉽고 펴리
-> 여러 atom 가져올수있다.
-> key, get Fn: 어떤 것을 반환할지 결정

  • 사용자가 선택한 카테고리 저장
    -> g한번에 한 카테고리만 보이도록 한다
    -> state 생성 : 원하는 카테고리의 목록만 보이도록 한다.
    -> todo 작성시 자동으로 todo 배열에 들어가는데, 내가 원하는 카테고리에 작성할 수 있도록 한다.
  1. -> select태그 작성해 카테고리 선택하도록 한다
    option : todo/dong/done
    -> 해당 카테고리에 해당하는 할일들만 나오게 된다

  2. select 태그에 onInput 이벤트 함수 추가
    ->event: React.FormEvent 이벤트 사용
    -> 콘솔로 값 찍어보면 카테고리 선택할때마다 값이 찍혀나오다.
    event.currentTarget.value로 알수있다

  3. 현재 값, 수정하는 함수 hook 사용
    useRecoilState=> atom 값과 modifier 함수 반환
    -> atom 값으로 select 선택한 값 설정

  4. 렌더링에 적용
    -> selector 사용
    -> 배열 다르게 적용해서 코드 줄이기 가능

enum
1. select에서 카테고리 선택할때마다 atom category 값을 수정
2. 원하는 카테고리 선택후 todo 작성시 원하는 곳에 작성
3. type대신 enum 사용
실수 방지와 여기저기 쓰이는 같은 코드들 깔끄하게 하기 위해
수기로 쓰지 않도록 하기 위해
-> 리펙토링
select 안 option value 모두 수정

0개의 댓글