useState를 호출할 때에 type에 undefined를 명시하시나요?

[hywlss9]

// 1. undefined 명시 안 함
const [id, setId] = useState<number>();

// 2. type에만 undefined 명시
const [id, setId] = useState<number | undefined>();

// 이렇게도..?
const [id, setId] = useState<number | undefined>(undefined);

저는 useState의 initialState가 없으면 초기 값이 undefined라는 걸 알 수 있으니 1번을 주로 사용하는데요,

2번처럼 undefined를 추가하여 더 명시적으로 사용하시기도 하더라구요.

의견이 궁금합니다!

[KimChunsick]

안녕하세요! @hywlss9 님! 좋은 주제 감사드려요.

제 기준에서 이것은 팀내의 협의를 통한 일관적인 규칙만 있다면 3개 옵션 모두 괜찮을 것 같아요.

그와 별개로 저는 원시 타입의 경우는 initialState에, 각 타입별 falsy한 값을 넣는 것 같아요. 그거 정도만해도, initialState와 변수명만을 보고 어느정도 유추가 잘 되어서요!

function Foo() {
  const [open, setOpen] = useState(false)
  const [count, setCount] = useState(0)
  const [searchText, setSearchText] = useState('')
  // ...
}

위 코드 처럼요.

아니면 값이 없다. 같은 상태를 표현할 때는, null을 사용해서 표현하는 것 같아요. 의도적으로 비어있음을 나타내어주려구요.

function Foo() {
  const [val, setVal] = useState<SomeValue | null>(null)
  // ...
}

위 처럼 나타내고 있어요.

[hywlss9]

안녕하세요 @KimChunsick 님!
답변 진심으로 감사드립니다ㅎㅎ

답변을 보고 생각해 보니 당연히 값이 없다. 의 경우 undefined보다 null이 더 맞다고 생각이 드네요..ㅎㅎ
팀 내의 협의를 통해 규칙을 정하여 3가지 중 정해진 것으로 쓰는 것도 좋겠다는 의견도 참고하겠습니다!

좋은 하루 보내세요!

[KimChunsick]

좋은 주제 꺼내주셔서 제가 더 감사드려요! 😄
저 이외에는 토론에 참여하신분이 없으시긴하지만, 토론이 완료되신 것 같다면 'Close as resolved'를 눌러주실 수 있으실까요?
아직 논의되지 못한 부분이 있다면 말씀주세요!