공부배경

오늘도 하나 배운다. useState에 배열을 선언해서 쓰고 싶은데 보통 javascript에서는 []만 넣으면 알아서 만들어 주지만, 난 우아하게 코딩 하기 위해서 ts를 쓰기 때문에 문법 오류 나는 꼴을 무시할 수 없어 별애별 짓을 다 해보고 찾아보고 하다가 결국 2가지 방법을 찾았다. 최대한 타입스크립트에 이점을 찾기 위해서 노력한다.

코드

// 타입 선언 
type Todo = {
  id: string,
  title: string,
  comYn: boolean,
}

// useState 훅 선언 및 초기화 
const [todoList, setTodoList] = useState<Array<Todo>>([]) // 제네릭 - Array<타입>
const [todoList2, setTodoList2] = useState<Todo[]>([]) // 제네릭 - 타입[] 

// 값추가 
setTodoList([...todoList, {
  id: new Date().getTime().toString(),
  title: todoInput,
  comYn: false,
}])

// 값조회
<ul>
	{todoList.length > 0 ? todoList.map(item => {
	  return <li key={item.id}>{item.title}, {item.comYn}</li>
	}) : <div>데이터가 존재하지 않습니다. </div>}
</ul>

느낀점

이렇게 두 가지중 하나를 익혀서 사용하면 우아하고 멋지게 작성할 수 있다.
덤으로 값을 넣을때와 값을 빼서 사용하는 것도 추가해 보았다.
...문법이 그닥 좋지 않다고 하던데 데이터가 커지면 메모리누수가 발생할 우려가 있다고 하여 immutable을 이용해서 짜봐야 하는데 그건 아직 못하고 있다.
일단 데이터값이 작으니 간단하게 작성해 본다.

앞으로 계획

promise를 이용한 비동기 데이터 삽입 및 조회 기능을 구현해 보려고 생각 중이다.
물론 쉽지는 않을 것이다.
덤으로 promise에 익숙해 지면 async, await도 사용하여 처리해 보는게 궁극의 쟁점이다.