Typescript 공부하기 10일차 (2022.10.25)

1. props 타입 적용

1) 함수형 컴포넌트에 props 타입 설정

   - {...props}: 스프레드 연산자로 props를 button의 props에 모두 전달

   - React.PropsWithChildren: 제네릭에 전달한 props와 props.children을 인터섹션

   - props.children: react에서 기본적으로 전달해주는 children props. 자식 노드들이 전달됨

   - React.FC 타입을 사용하면 내부적으로 PropsWithChildren을 사용하여 제네릭의 Props 타입과 children 타입을 인터섹션 props에 React.PropsWithChildren을 선언하는 것과 같은 효과

 

2) style props에 타입 적용

   - 모든 button에 적용됨

   - class로 만들어도 background-color, color, font-size, font-weight 등 자주 변경되는 것들을 위해 여러개의 class를 조합해야 함

   - ex) className=“button bg-black size-16 weight-700”

   - React.CSSProperties: button 태그의 style props 타입

   - createButtonStyle: 반환 타입을 React.CSSProperties로 하는 style 객체 팩토리 함수 생성

   - '...styles'로 다른 style 속성도 받을 수 있게 추가

 

3) event props에 타입 적용

   - handleClick: button의 onClickprops에 전달할 props

   - event가 인자로 들어옴

   - React.MouseEvent<Element, Event>: <button onClick={e => console.log(e)} /> 상태에서 e에 마우스 호버

   - e(event)의 타입을 복사해서 ButtonProps 인터페이스의 handleClickevent 타입으로 붙여넣기

   - 혹은 BaseSyntheticEvent 사용

 

프론트앤드 하나도 모르겠다ㅠㅠ

 

 

2. hook에 타입적용

 

3. context API에 타입 적용

 

4. 타입스크립트와 리액트 상태관리: redux

 

5. 타입스크립트와 리액트 상태관리: jotai