React와 Vue에서 undefined와 맞짱뜨는 법

React와 Vue (Composition API)에서 undefined 다루기

JavaScript에서 undefined는 자주 발생하는 값이지만, React와 Vue의 Composition API를 사용할 때도 다양한 상황에서 문제가 될 수 있다. 이번 포스트에서는 React와 Vue에서 undefined가 발생하는 경우, 그 원인, 해결 방법, 그리고 TypeScript 도입 시 이점에 대해 자세히 살펴보겠다.

1. React에서 undefined 다루기

1.1. props가 undefined일 때

React 컴포넌트에서 부모 컴포넌트로 props를 전달할 때, 해당 props가 undefined로 전달되면 에러가 발생할 수 있다. 예를 들어:

function Child({ name }) {
    return <div>{name.toUpperCase()}</div>; // TypeError: Cannot read properties of undefined (reading 'toUpperCase')
}

function Parent() {
    return <Child />; // name이 undefined로 전달됨
}

해결 방법

• props가 필수인 경우 PropTypes를 사용하거나 기본값을 설정하여 문제를 예방할 수 있다.

Child.defaultProps = {
    name: '기본 이름'
};

1.2. 상태(state) 초기값 미설정

React의 useState 훅을 사용할 때 초기값을 설정하지 않으면, 해당 상태는 undefined가 된다.

const [count] = useState(); // count가 undefined

해결 방법

• 항상 초기값을 설정하여 상태가 undefined로 초기화되는 것을 방지해야 한다.

const [count, setCount] = useState(0); // 초기값 설정

1.3. 비동기 데이터 처리

API 호출 등의 비동기 작업에서 데이터가 아직 로드되지 않은 상태에서 접근할 경우 undefined 에러가 발생한다.

const [data, setData] = useState(null);

useEffect(() => {
    fetchData().then(response => {
        setData(response);
    });
}, []);

return <div>{data.name}</div>; // TypeError: Cannot read properties of null (reading 'name')

해결 방법

• 조건부 렌더링을 사용하여 데이터가 로드된 후에 접근하도록 한다.

return <div>{data ? data.name : '로딩 중...'}</div>;

1.4. TypeScript 도입의 이점

TypeScript를 사용하면 React에서 undefined 문제를 보다 효과적으로 관리할 수 있다.

1.4.1. 명시적인 타입 정의

TypeScript에서는 변수나 함수의 매개변수, 반환값에 대해 명시적인 타입을 정의할 수 있다. 이를 통해 undefined가 발생할 수 있는 상황을 사전에 차단할 수 있다.

interface ChildProps {
    name?: string; // name은 선택적 속성
}

function Child({ name }: ChildProps) {
    return <div>{name?.toUpperCase() ?? '기본 이름'}</div>; // Optional chaining 사용
}

이렇게 하면 name이 undefined일 경우에도 에러가 발생하지 않으며, 기본값을 제공할 수 있다.

1.4.2. 컴파일 타임 오류

TypeScript는 컴파일 타임에 오류를 검출할 수 있다. 예를 들어, undefined인 변수를 사용하려고 하면 에러가 발생한다.

let value: string | undefined;
console.log(value.length); // 오류 발생: Object is possibly 'undefined'.

이런 식으로 TypeScript는 개발자가 코드를 작성할 때 undefined로 인한 잠재적 오류를 미리 알려준다.

2. Vue (Composition API)에서 undefined 다루기

2.1. props가 undefined일 때

Composition API를 사용할 때, 부모 컴포넌트에서 자식 컴포넌트로 전달된 props가 undefined일 경우 문제가 발생할 수 있다.

import { defineComponent } from 'vue';

const Child = defineComponent({
    props: {
        name: {
            type: String,
            default: '기본 이름' // 기본값 설정
        }
    },
    setup(props) {
        return () => <div>{props.name.toUpperCase()}</div>; // props.name이 undefined가 아닐 때 안전하게 호출됨
    }
});

const Parent = defineComponent({
    setup() {
        return () => <Child />; // name이 전달되지 않지만 기본값 사용
    }
});

해결 방법

• 기본값을 설정하여 undefined가 발생하는 것을 방지한다.

2.2. data 속성이 초기화되지 않은 경우

Composition API에서 data 속성이 초기화되지 않으면 해당 값은 undefined가 된다.

import { ref } from 'vue';

const ExampleComponent = defineComponent({
    setup() {
        const count = ref(); // 초기값 설정 안 됨
        return () => <div>{count.value}</div>; // TypeError: Cannot read properties of undefined
    }
});

해결 방법

• 항상 초기값을 설정하여 상태가 undefined로 초기화되는 것을 방지해야 한다.

const count = ref(0); // 초기값 설정

2.3. 비동기 API 호출

API에서 데이터를 가져오기 전에 컴포넌트가 렌더링되면, 해당 데이터가 undefined가 되어 에러가 발생할 수 있다.

import { onMounted, ref } from 'vue';

const ExampleComponent = defineComponent({
    setup() {
        const user = ref(null);

        onMounted(async () => {
            user.value = await fetchData();
        });

        return () => <div>{user.value.name}</div>; // TypeError: Cannot read properties of null (reading 'name')
    }
});

해결 방법

• 로딩 상태를 체크하여 데이터가 준비된 후에 접근한다.

return () => <div>{user.value ? user.value.name : '로딩 중...'}</div>;

2.4. TypeScript 도입의 이점

TypeScript는 Vue의 Composition API에서도 undefined 문제를 보다 효과적으로 관리할 수 있게 해준다.

2.4.1. 명시적인 타입 정의

TypeScript를 사용하면 props와 reactive 상태의 타입을 명시적으로 정의할 수 있다.

import { defineComponent, ref } from 'vue';

interface User {
    name: string;
    age: number;
}

const ExampleComponent = defineComponent({
    setup() {
        const user = ref<User | null>(null); // User 타입을 명시적으로 설정

        onMounted(async () => {
            user.value = await fetchData(); // API 호출 후 유저 데이터 할당
        });

        return () => <div>{user.value ? user.value.name : '로딩 중...'}</div>;
    }
});

이렇게 하면 user.value가 null일 경우에도 안전하게 체크할 수 있다.

2.4.2. 컴파일 타임 오류

TypeScript는 컴파일 타임에 undefined와 관련된 오류를 사전에 방지할 수 있다. 다음과 같은 예제를 고려해보자.

const user: User | undefined = undefined;
console.log(user.name); // 오류 발생: Object is possibly 'undefined'.

TypeScript는 이 경우에 user가 undefined일 수 있다고 경고하여 개발자가 미리 대비할 수 있게 한다.