린트 켜고!
콘솔에 경고 없이
150줄을 넘기지 않는 코드 짜기
광클 방지로 쓰로틀링, 디바운스 걸기 (300ms 정도)
observer 사용하면 꼭 언마운트 클린 해주기
역시나 광클시 api 를 불러오고 state에 저장되는 과정을 고려하여 코드 짜기
key 값은 노출되지 않도록 .env 에 작성하고 .gitignore 확인.
.env.copy 에 key 값만 빼고 작성해서 사용 설명 넣기.
setInterval, setTimeout 사용하면 unmount 에서 클린 필수. (계속 생성되고 있다..)
style 요소는 css에서 처리하기!! (transition-delay..)
any 절대 안쓰기
html input change 의 이벤트 값은 ChangeEvent<>로 관리
atom만 잘 활용해도 Recoil 을 잘 쓰는 것!
useRecoil 커스텀 훅으로 만들어 활용해 보면 좋음!
recoil의 같은 키로 너무 넓은 범위에서 사용하지 않도록 하기!
import { atom } from 'recoil'
import { ITodoItem } from 'types/todo.d'
interface ITodoItem {
id: number
title: string
done: boolean
}
const INIT_TODO = [
{
id: 1,
title: '계란 2판 사기',
done: false,
},
{
id: 2,
title: '맥북 프로 M1 Max CTO 버전 사기',
done: false,
},
{
id: 3,
title: '오늘의 TIL 작성하기',
done: false,
},
]
export const todoListState = atom<ITodoItem[]>({
key: '#todoListState',
default: INIT_TODO,
})
import {useRecoilValue, useSetRecoilState, useRecoilState, useResetRecoilState} from "recoil"
const todoList = useRecoilValue(todoListState);
const setTodoList = useSetRecoilState(todoListState);
const [todoList, setTodoList] = useRecoilState(todoListState),
const resetTodo = useResetRecoilState(todoListState)