지난 포스팅에 이어 React 프로젝트에서 type 지정 시 참고하기 위한 자료에 대해 정리해보겠다.
Type과 Interface의 차이점
| Type | Interface |
|---|---|
| - 객체지향프로그래밍의 개념을 활용해서 디자인되어서 가독성이 좋음 | |
| - 다양한 용도(아래 코드 참고) | - object의 모양을 특정해주기 위한 용도만을 가짐 |
| - property를 축적시킬 수 있음 | |
| - omit : 빼기, pick : 고르기 가능 |
✔️ 그냥 object의 모양만을 특정해주기 위해 사용한다면, interface 쓰기
type 사용 예시
- object 모양 설명해주기 (interface와 동일한 기능)
- 타입 지정
- allias(대체명)쓰기
- 타입이 배열을 나타내도록 할 수 있음
- 지정된 옵션으로 type 제한하기
// 1. TS에게 Object 모양 설명해주기
type Player = {
nickname:string,
age:number
}
const morgan:Player = {
nickname:"morgan",
age: 20
}
// 2. 타입 지정하기
type Fruit = string;
const Apple:Fruit = "yummy";
// 3. allias(대체명) 쓰기
type Nickname = string;
type Age = number;
type Player = {
nickname: Nickname,
age: Age
}
// 4. 타입이 배열을 나타내도록 할 수 있음.
// string의 배열을 나타내는 type
type Friends = Array<string>
// 5. 지정된 옵션으로 type 제한하기
// concrete type의 특정 값을 쓸 수 있음.
type Team = "red" | "blue" | "yellow"
type Age = 10 | 20 | 30
type Player = {
nickName: string,
team: Team,
age: Age
}
const morgan:Player = {
nickname: "morgan",
team: "blue",
age: 20
} // team, age 정해진 옵션만 써야함.
type의 omit, pick 사용방법
omit: 빼기pick: 고르기
type User = {
email:string;
nickname:string;
age:number;
}
type UserWithoutAge = Omit<User, 'age'>;
type UserNickName = Pick<User, 'nickname'>;
type과Interfaceextends 하는 법
// interface
interface OwnProps extends User {
setData(data:string):void
}
// type
type OwnProps = & User {
setData(data:string):void
}
React.FC(Functional Component)
React.FC를 사용하면 어떤 특징이 좋을까?
- props의 타입을 Generics를 넣어서 사용한다.
- props에 기본적으로
children(optional)이 들어있다.
따라서, children property에 대해 타입 설정을 하지 않고 사용할 수 있다.
type GreetingsProps = {
name: string;
optional?: string;
onClick: (name: string) => void;
};
// React.FC를 사용하지 않는 경우
const Greetings = ({ name, optional, onClick }: GreetingsProps) => {
....
}
// React.FC를 사용하는 경우
const Greetings: React.FC<GreetingsProps> = ({ name, optional, onClick, children }) => {
...
}Event type
// interface
interface IProps {
onChange: React.ChangeEvent<HTMLInputElement>
}
// function in tsx
const onChange = (event: React.FormEvent<HTMLInputElement>) => {
const { name, value } = event.currentTarget;
}의문점 : 해당 property를 클릭해보면, FormEventHandler 혹은 ChangeEventHandler라고 나타나는데, 적용이 안됨....
찾아보고 내용 보충하기 :) !!!
구조분해할당 활용
type GreetingsProps = {
name: string;
optional?: string;
onClick: (name: string) => void;
};
function Greetings = (props: GreetingsProps) {
const { name, optional, onClick } = props;
....
}
제네릭 사용 예제
useState
- useState의 data 타입은 제네릭이다.
- 따라서, 값을 줘서 타입추론이 가능하게 하거나
type & interface를 통해 타입 지정 필요
// IApp:인터페이스, dummyData type은 IApp
const App: React.FC = () => {
const [data, setData] = useState<IApp>(dummyData);
Danamic Type
제네릭을 활용하여 타입을 다이나믹하게 써보기
type Restaurant = {
name:string,
.....
}
type ApiResponse<T> = {
data: T[],
totalPage: number,
page:number
}
type RestaurantResponse = ApiResponse<Restaurant>;
// data: Restaurant[]🦥 마치며
글을 작성하며 명확하지 않은 부분을 추가로 찾아보다보니, 작성하는데 무지 오래걸렸다 🥹..
그래도 다시 복습하고 내용을 찾으면서 타입에 대한 자신감이 +1 되었다.
특히, 제네릭에 대해 공부는 했었지만 썩 잘 적용하지 못했었다..
프로젝트 진행하는 동안, 다이나믹한 타입을 지정해야할 상황이 꽤 많았어서 그 때 제네릭을 잘 활용했으면 좋았을텐데 하는 생각이 들었다. 글 마무리하면 다시 들여다봐야겠다.
그리고, React.FC에 대해서 처음 알게 되었다.
children에 대해 타입 지정을 어떻게 해야할 지 항상 고민하다
일단 any를 넣고 넘어가고, 타입이 정해졌을 때 타입을 넣는 방식으로 프로젝트엔 적용했었다.
그런데, React.FC를 사용하면 children이 기본적으로 들어가있다니, optional이라 없어도 되고.. 너무 좋은데?
그런데 React.FC를 사용하면 문제가 생길 수 있다는 얘기가 있던데,
이 부분은 다시 알아봐야겠다..!
그리고, 구조분해할당을 활용한 건 생각지도 못했던 방법이었다. 해당 내용을 깃헙 레포지토리 구경하다가 찾았는데, props가 지저분하게 잔뜩 늘어놓아져 있는 컴포넌트가 머리에 스쳐지나갔다.
포스팅해놓고, 꼭 프로젝트 리팩토링할 때 써먹어야지 :)
출처
https://github.com/junh0328/learning_typescript
https://youtu.be/V9XLst8UEtk
