TS- react관련 질문입니다

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

Context API

작성

296

context api 를 사용할때 타입을

export const TodoStateContext = React.createContext<Todo[] | null>(null);
export const TodoDispatchContext = React.createContext<{
  onClickAdd: (text: string) => void;
  onClickDel: (id: number) => void;
} | null>(null);

이런식으로 null도 포함시키면 항상 옵셔널 체이닝을 사용해야하거나 강의에서 말씀해주신 커스텀훅을 만들어서 사용해야하나요? 뭔가 비효율적인 느낌이 있어서요 ㅜㅜ

실무에서 props말고 context api나 redux로 데이터를 넘겨주는 경우가 더 많은가요?

typescript

답변 1

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

옵셔널 체이닝이나 커스텀 훅 말고도 논널 단언(!을 붙이는 단언)을 사용하시거나 as로 단언해 사용하셔도 되구요 또는 초기값을 createContext 함수에 인수로 전달해 null 타입을 아예 제거하셔도 됩니다. 다만 단언을 이용하시게 될 경우 타입 오류에서 안전하지는 않다는 점 주의하셔서 사용하시면 됩니다.

회사마다 그리고 팀마다 다르겠찌만 실무에서는 안내드린 방식대로 커스텀 훅을 이용해 안전하게 Context의 값을 꺼내오는게 일반적입니다. 코드를 간결하게 작성하는 것도 중요하지만 그것보다 더 중요한건 견고한 코드를 작성하는 것 이기 때문입니다. 오류가 발생하는 코드라면 아무리 간결하게 작성되었더라도 좋은 코드라고 보기 어렵습니다.

또 복잡한 어플리케이션을 Props로만 구축하는 경우는 잘 없습니다. 그렇게 할 경우 Props가 컴포넌트 계층구조에서 마치 드릴처럼 파고드는 Props Drilling 문제를 만나게 되기 때문입니다. 기능을 추가하기도 수정하기도 심지어 삭제하기도 어려워지게 됩니다. 이는 직접 어느정도 규모가 있는 상태관리가 필요한 어플리케이션을 만들어 보시면 확실히 느껴보실 수 있을거에요

kizarrd10

안녕하세요, 관련해서

optional chaning을 사용하는 대신 dispatch가 null인 경우 에러를 발생시키도록 커스텀 훅을 작성하여 해결한다는 것으로 이해했는데, 이러면 사실 optional chaning을 사용하는 것보다도 더 위험한 코드가 되는것은 아닌지 질문드립니다.

실제 프로덕트에서라면 try catch로 감싸야 하는 것인지, 만약 그렇다면 구체적으로 어떤식으로 작성할 수 있을지 궁금합니다.

인프런 커뮤니티 질문&답변

TS- react관련 질문입니다