React + TypeScript(state)

기존의 useState 사용 방식

const [count, setCount] = useState(초기 값);

• useState 를 사용하면 value 를 얻게 됩니다.
• 첫 번째 값은 state 의 value 입니다.
• 두 번째 값은 value 의 상태 변화 함수 입니다.

---

 

useState 에 초기 값을 넣으면 ❓

const [count, setCount] = useState(1);

• count 에 숫자 값이 들어온다고 TypeScript 가 초기 값을 가지고 추론을 한 것 입니다.

 

또한

const [count, setCount] = useState(1);

setCount(2);

• 아무 일도 생기지 않습니다. 작성해야 하는 대로 작성을 했기 때문에

• 하지만 만약 string 타입을 보내게 되면, 에러가 있다고 말해줍니다.
• 왜냐하면 TypeScript 가 보기에 개발자가 state 를 만들고 초기 값을 1을 주어 숫자로 시작하고 있다면
• 계속 숫자 데이터를 사용할 것이라고 생각 합니다. ( 이것은 초기값을 어떤 형태로 주냐에 따라 동일 합니다. )

---

 

✔ 추론말고 사용하기

const [value, setValue] = useState(0);

1. value 는 string 또는 number 타입이 될 수 있다고 알리기

const [value, setValue] = useState<number | string>(0);

• 에러가 발생하지 않습니다., 하지만 setValue 의 값을 true 로 설정하면 에러가 발생 합니다.
• 왜냐하면, 타입 선언을 하지 않았기 때문입니다. state 를 만들면 보통 같은 타입으로 지속적으로 갑니다.
• 만약 false 로 시작하면 true 와 false 사이에서 바뀌게 될 것 입니다.
• TypeScript 는 선언을 하지 않아도 초기 값에 들어오는 것에 따라서 충분히 추론을 할 수 있습니다. 

const [value, setValue] = useState(잘 넣어주기!)

---

 

참고

• 노마드코더