TS- react관련 질문입니다
363
작성한 질문수 17
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로 데이터를 넘겨주는 경우가 더 많은가요?
답변 1
0
안녕하세요 이정환입니다.
옵셔널 체이닝이나 커스텀 훅 말고도 논널 단언(!을 붙이는 단언)을 사용하시거나 as로 단언해 사용하셔도 되구요 또는 초기값을 createContext 함수에 인수로 전달해 null 타입을 아예 제거하셔도 됩니다. 다만 단언을 이용하시게 될 경우 타입 오류에서 안전하지는 않다는 점 주의하셔서 사용하시면 됩니다.
회사마다 그리고 팀마다 다르겠찌만 실무에서는 안내드린 방식대로 커스텀 훅을 이용해 안전하게 Context의 값을 꺼내오는게 일반적입니다. 코드를 간결하게 작성하는 것도 중요하지만 그것보다 더 중요한건 견고한 코드를 작성하는 것 이기 때문입니다. 오류가 발생하는 코드라면 아무리 간결하게 작성되었더라도 좋은 코드라고 보기 어렵습니다.
또 복잡한 어플리케이션을 Props로만 구축하는 경우는 잘 없습니다. 그렇게 할 경우 Props가 컴포넌트 계층구조에서 마치 드릴처럼 파고드는 Props Drilling 문제를 만나게 되기 때문입니다. 기능을 추가하기도 수정하기도 심지어 삭제하기도 어려워지게 됩니다. 이는 직접 어느정도 규모가 있는 상태관리가 필요한 어플리케이션을 만들어 보시면 확실히 느껴보실 수 있을거에요
1
안녕하세요, 관련해서
optional chaning을 사용하는 대신 dispatch가 null인 경우 에러를 발생시키도록 커스텀 훅을 작성하여 해결한다는 것으로 이해했는데, 이러면 사실 optional chaning을 사용하는 것보다도 더 위험한 코드가 되는것은 아닌지 질문드립니다.
실제 프로덕트에서라면 try catch로 감싸야 하는 것인지, 만약 그렇다면 구체적으로 어떤식으로 작성할 수 있을지 궁금합니다.
적절한 타입 찾기 React.ChangeEvent<HTMLInputElemen>
0
22
2
outDir 옵션 추가 후 컴파일 오류 질문
0
58
1
호출 시그니처 질문
0
64
2
서로소 유니언 타입이 discriminated union과 동의어 인가요?
0
74
2
조건부타입소개 중 함수오버로딩 활용 시 인수의타입과 함수의 반환값의 타입이 깨지는 문제
0
65
1
할인쿠폰 관련하여
0
154
2
프론트엔드에서의 인터페이스활용
0
92
2
안녕하세요 이정환님!
0
90
1
Node.js 설치에 관한 질문입니다.
0
79
2
함수 타입 호출 시그니처
0
56
1
35강. 모듈 보강은 라이브러리 파일을 직접 편집해야 하나요?
0
63
2
인터페이스 문법이 있는데 타입 별칭 문법은 왜 있나요?
0
115
4
마우스 호버 시 정보
0
91
2
vite으로 리액트 빌드하기를 업데이트해주세요.
1
89
2
타입가드를 만들어 사용하는 이유가 궁금합니다.
0
82
2
섹션 12가 너무 어려운데... 정상이겠죠..?
0
135
2
선생님.. 알고리즘도 강의해주시면안되나요
0
100
2
선생님은 어떻게 이런걸 아세요?
0
128
1
type: module
0
97
2
7:17초 업캐스팅 질문이있습니다!
0
75
1
슈퍼타입질문
1
62
2
프로젝트 설치
0
103
2
enum은 비원시 타입이면서 열거형 타입이 되는건가요?
0
68
2
함수는 함수타입? 객체타입??
1
94
2