사이드 프로젝트 React.tsx

✅사이드 프로젝트 React.tsx

안녕하세요 TriplexLab입니다.

지금 저는 항해 99 7기를 끝내고 팀원 4분과 함께 사이트 프로젝트를 진행하고 있습니다.

tsx으로 사이드 프로젝트를 진행하고 있는데 TS를 프젝트를 진행하는 것은 이번이 처음입니다.

지금까지 진행하면서 시행착오를 겼었는데요. 좀 정리를 해볼까 합니다.

👉🏻 tsx와 styled-components

interface로 타입을 정의할 때 "옵션널한 값" 또는 "필수 값"으로 정의 할수 있습니다.

반드시 써야하는 필수 값

그래서 다음 같이 "옵션널한 값"으로 변경을 해줬더니, isCose 값만 props로 넘길 수 있게 되었습니다.

타입 스크립트 인강을 볼 때는 아 저런 것이 있구나 정도만 알고 있었는데, 직접 해보니 이렇게 쓰이는구나를 깨닫는 순간이었다.

styled-components에서 타입을 정의하는 모습

👉🏻 이벤트 객체도 타입을 지정해야 함.

이벤트 객체도 React.ChangeEvent로 타입을 지정 해줄수 있습니다.

다음은 onChange props에서 "이 호출과 일치하는 오버로드가 없습니다."라고 에러 가나옵니다.
이것은 타입을 정의할때 object로 정의를 했는데 object아 아니라 event객체를 정의할때 선언한 React.ChangeEvent 으로 타입을 수정을해야 합니다.

잘못 타입 지정한 모습

interface InputProps{
	...생략
	onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

이렇게 타임을 수정했더니 문제의 에러가 해결되었습니다.

정상적으로 타입을 정의한 모습

👉🏻useState에서 타입 선언

useState로 상태관리 할때도 타입을 선언 해줘야 합니다.
여기서 주의해야 할점은 형태가 배열이면 배열행태입니다라고 같이 작성해야 한다는것 입니다.

잘못된 타입선언

다음과 같은 에러 메세지가 나옵니다.

타입이 안맞아서 할당할수 없다는 내용

이렇게 타입을 수정했더니 문제의 에러가 해결되었습니다.

const [value, setValue] = useState<FooterComponentsProps[]>([]);

정상적으로 타입을 정의한 모습

👉🏻react useReducer type

useReducer를 사용할때 타입명시하는 상황입니다.
Reducer를 작성할때 state와, action 타입을 지정해줘야 할때가 있습니다.
그럼 다음과 같이 Reducer<any, any>쪽으로 들어가게 되는겁니다.

useReducer 타입 명시

주의해야 할것은 createContext만들때 타입정의 한것과,
Reducer만들때 state타입, action타입 들이 서로 일치해야 합니다.!!🎯😃

createContext와 Reducer의 동일한 타입 지정