TypeScript + React

2019-11-11

Pick을 쓰면 데이터의 흐름을 파악하는 데에 도움이 된다. 보조 컴포넌트의 props 타입을 Pick으로 선언해서 데이터의 출처에 대한 추가적인 정보를 명시할 수 있다.

Pick<PostPreview, 'category' | 'date' | 'title'>

2019-10-28

HTML 요소를 담는 컨테이너를 만들기 위해 useRef 훅을 사용할 때 타입 표기를 하지 않아서 에러가 발생했다. MutableRefObject의 current 필드가 undefined로 추정이 되어 value 값을 가져올 수 없었다. 검색 결과에 따르면 아래 두 가지 방법을 쓸 수 있다.

useRef<HTMLElement>(null!)
useRef<HTMLElement | null>(null)

첫번째는 current 필드를 읽기 전용으로 만든다는데, null 뒤에 붙은 Non-null Assertion 연산자(!)를 어떻게 이해해야 할지 모르겠다. ESLint는 「Forbidden non-null assertion」이라고 경고한다. 시험 결과 current 필드가 읽기 전용이 되지 않는 걸로 보인다.

useRef<A>()의 타입은 MutableRefObject<A | undefined>이고, useRef<A>(null)의 타입은 RefObject<A>이다. 위 검색 결과에 나온 방법과는 반대로 Non-null Assertion 없이 그냥 null을 사용헀을 때 오히려 읽기 전용이 되었다.

const inputRef = useRef<HTMLInputElement>(null)

<input ref={inputRef} />