🚨 Troubleshooting

TypeScript를 구조 분해 할당과 함께 사용하면서 제대로 알지 못하고 사용하니 자꾸 type error가 발생했습니다. 기능 구현도 바쁜데 type error가 자꾸 뜨니 any를 선언하게 되는데 이러면 TypeScript를 쓰는 의미가 없겠죠. 객체 형태의 props의 type 지정에 대해 제대로 숙지하지 못해 발생하는 error였고 이를 정리해보고자 합니다.

props를 객체 형태로 전달할 경우

먼저 객체 형태의 props를 객체 형태로 전달해 보는 경우를 살펴보겠습니다.


export interface NoticeInfoProps {
}
    notice: {
        title: ,
        category: ,
        createdAt: ,
        _id: ,
    };


export interface NoticeInfoProps {
}
const NoticeInfo = ({ notice }: NoticeInfoProps) => {


}
const NoticeInfo = ({ notice }: NoticeInfoProps) => {

props로 notice를 전달하고자 합니다. 이 때 notice는 다음과 같이 key로 title, category, createdAt, _id를 가진 객체입니다.

이제 type을 지정해 보도록 하겠습니다. props로 객체인 notice를 전달하는 것이므로 type 지정 시 마찬가지로 notice의 객체 형태로 표현해야합니다.

{ notice } 형태로 props 전달 받았으므로 바로 비구조화 할당으로 데이터 꺼내 쓰면 됩니다.

props를 그대로(객체 형태가 아닌) 전달할 경우

props는 위와 동일한 notice로 객체 형태이지만 { notice }가 아닌 notice 형태로 props를 전달해 사용하는 방법을 살펴보겠습니다.


export interface NoticeInfoProps {
}
    notice: {
        title: ,
        category: ,
        createdAt: ,
        _id: ,
    };


export interface NoticeInfoProps {
}
const NoticeCardInfo = (notice: NoticeInfoProps) => {


}
const NoticeCardInfo = (notice: NoticeInfoProps) => {

props인 notice는 다음과 같이 key로 title, category, createdAt, _id를 가진 객체입니다. 이는 위의 case와 동일한 사항입니다.

notice를 객체 형태로 보내지 않아도 type 지정은 동일합니다. 이는 props로 notice를 부모 컴포넌트로부터 전달 받는 것은 동일하기 때문입니다. 즉 type 지정 시 notice의 객체 형태로 표현해야 합니다.

notice로 props를 전달받았으므로 비구조화 할당(구조 분해 할당)할 때 객체 형태에서 꺼내 써야 합니다. 비구조화 할당 시 notice에서 한 depth 더 들어가 데이터 꺼내 써야합니다.

props의 type을 지정하는 것은 동일하나 해당 props를 전달할 때 객체에서 한 번 꺼내 보낼건지, 아닐지에 따라 비구조화 할당이 달라진다는 것을 알 수 있습니다.

💡TL;DR


export interface NoticeInfoProps {
    notice: {
        title: string;
        category: string;
        createdAt: string;
        _id: string;
    };
}
const NoticeCardInfo = (notice: NoticeInfoProps) => {
const NoticeInfo = ({ notice }: NoticeInfoProps) => {
const { title, category, createdAt, _id } = notice;


}
const NoticeCardInfo = (notice: NoticeInfoProps) => {

{ notice }와 같이 형태로 props를 전달 받았을 때 이미 props를 전달받을 때 객체를 분해해 받았으므로 바로 그 안의 key로 data에 접근해 사용하면 됩니다.

notice와 같이 객체 형태가 아닌 props로 전달 받았을 때 notice의 객체 depth를 고려해 비구조화 할당해서 사용해야 합니다.