필수

• 린트 켜고!

• 콘솔에 경고 없이

• 150줄을 넘기지 않는 코드 짜기

좋은 코드

• 광클 방지로 쓰로틀링, 디바운스 걸기 (300ms 정도)

• observer 사용하면 꼭 언마운트 클린 해주기

• 역시나 광클시 api 를 불러오고 state에 저장되는 과정을 고려하여 코드 짜기

• key 값은 노출되지 않도록 .env 에 작성하고 .gitignore 확인.

• .env.copy 에 key 값만 빼고 작성해서 사용 설명 넣기.

• setInterval, setTimeout 사용하면 unmount 에서 클린 필수. (계속 생성되고 있다..)

• style 요소는 css에서 처리하기!! (transition-delay..)

TS 사용

• any 절대 안쓰기

• html input change 의 이벤트 값은 ChangeEvent<>로 관리

Recoil

• 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)