Typescript : TodoList 만들어보기

리액트를 처음 해볼 때

Javascript로만 TodoList를 다들 만들어 보셨을겁니다.

 

이번엔 그거를 Typescript로 만들어 보려고 합니다.

 

회사 프로젝트를 하면서도 많이 사용하고, 지금새로 하는 React Javascript Todo->React Typescript Todo 여기서도 많이 배우고 있습니다.

 

https://github.com/jeongseoe/react-study

GitHub - jeongseoe/react-study

 

 

1) interface

일단 Javascript 에서 쓰던 props 들은

typescript 에서는 그대로 사용하지 못합니다.

interface로 타입을 정의한 후 props로 해주어야 오류가 나지 않습니다!

이런 식으로 interface로 props 하고싶은 것의 타입을 정의하고

내려준 후 한 번더 호출해줍니다 props를

그 후에 props로 내려줄 수 있습니다.

 

style도 props사용 할 수있죠 javascript에서는!!

그치만 typescript 에서는 style에서도 type을 정의해주어야 합니다.

아래 내용 쪽에 props.done 여기서 done이 어떤 타입인지 위에다가 정의를 해주어야 합니다.

 

 

 

 

2) reducer ( 해도해도 왜 아직도 이해가 안가고 어려운지 .....)
아직 typescript로 변환중이라 공부하고 다시 이부분은 작성하겠습니다

 

typescript로 변환하기 위해서는 

state 값에 들어갈 todoList, 그 안에 있는 하나하나의 todo의 타입을 정의해야한다.

state 말고도 action 타입도 정의해야한다.

 

createContext는 Generics를 사용하여 관리할 상태값을 설정해준다.

추후 Provider로 사용하지않아도 undefined가 될 수 있게 | undefined 도 정의해 주어야한다.

 

context를 사용하면 중간에 있는 엘리먼트들에게 props를 넘겨주지 않아도 됩니다.

context 는 React 컴포넌트 트라 안에서 전역적이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다.

그래서 props 없이도 값을 내려줄 수 있습니다.

 

하지만 context의 주된 용도는 다양한 레벨에 네스팅된 많은 컴포넌트에게 데이터를 전달하는 것입니다.

context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할 때만 써야합니다.