const [value, setValue] = useState(1);
*useState(a) a의 값이 number 이면 value는 number 타입, setValue(b) 의 b는 number 타입으로 타입 추론으로 타입이 지정된다.*
const [value, setValue] = useState<number|string>(1);
*useState(a) a의 값이 number | string 타입 이면, value, setValue(b) 의 b 는 number | string 타입으로 두 개의 타입으로 지정이 가능하다. 하지만 거의 사용할 일은 없지만 중요한 기능 중 하나 이다.*
(나중에 따로 정리할 것 - 1)
중첩된 객체의 상태를 변경할 때
일반적으로 React 상태에서 깊게 중첩된 객체를 조심해야 합니다. 예기치 않은 동작을 방지하려면 상태를 변경할 수 없도록 업데이트해야 합니다. 깊은 객체가 있을 때 불변성을 위해 깊은 복제를 하게 되는데, 이는 React에서 비용이 많이 들 수 있습니다. 왜요?
상태를 딥 클론하면 React는 변경되지 않았더라도 변수에 의존하는 모든 것을 다시 계산하고 다시 렌더링합니다!
따라서 문제를 해결하기 전에 먼저 상태를 평평하게 할 수 있는 방법을 생각하십시오. 그렇게 하면 useReducer()와 같은 큰 상태를 처리하는 데 도움이 되는 편리한 도구를 찾을 수 있습니다.
그것에 대해 생각했지만 여전히 깊이 중첩된 상태 트리를 사용해야 한다고 확신하는 경우 immutable.js 및 Immutability-helper 와 같은 라이브러리와 함께 useState() 를 사용할 수 있습니다 . 변경 가능성에 대해 걱정할 필요 없이 깊은 객체를 업데이트하거나 복제하는 것을 간단하게 만듭니다.