props 값과 Object.keys()의 사용

오랜만에 글을 쓰네요.

그간 휘몰아치는 마감시즌의 무한 수정 요청을 겪다 몸져누워 앓았었는데, 그럼에도 불구하고! 마감은 해야 했기에 끙끙대며 어찌저찌 마감은 지켰습니다. (다들 건강 꼭 잘 챙기시길..😂)

노션에 개인적으로 쌓아둔 여러 에러와 해결방법들도 곧 정리해서 들고 오도록 하겠습니다.

오늘은 laravel controller에서 가져와 props 값으로 프론트 단에서 값을 출력하고자 할 때 만났던 에러를 정리해보려 합니다.

여러분은 Object.key()를 아시나요? 자바스크립트를 써보신 분들이라면 아마 한 번씩 들어보셨으리라 예상됩니다. 삐약이인 저로써는 대략 언제 쓴다는 정도만 알았지, 이럴 때도 쓰는구나~를 이번에 알게 된 계기가 되었답니다

함께 살펴볼까요?

* 사용하는 버전 : Laravel 8, Vue3.js, Inertia.js

---

우선, 당시 에러를 재현해봅시다.

controller에서 university값을 props로 Index.vue에 넘겼습니다.

public function index(Request $request)
    {
        $user = $request->user();
        $university = $user->university()
            ->with('professor')
            ->get();

        return Inertia::render('Home/Index',[
            'university' => $university,
        ]);
    }

해당 값을 vue에서 사용하기 위해 다음과 같이 작성해 보았습니다.

구현 목표는 university가 없는 경우에 저장된 정보가 없다는 글을 출력하는 것이었습니다.

<script setup>
const props = defineProps({
	university: Object,
});
</script>
<template>
    <div v-if="props.university && props.university.length">
        <div v-for="universities in props.university" :key="university.id">
            <p>{{ props.university['university_name'] }}학교 입니다.</p>
        </div>
    </div>
    <div v-else>
        <p>저장된 정보가 없습니다.</p>
    </div>
</template>

하지만 예상과 달리 빈페이지가 출력되게 됩니다.

console.log();로 보통 찍어보면 다음 예시와 같이 값을 살펴볼 수 있죠?

console.log(props)로 조회한 예시

저는 당시 값을 출력해 보았을 때 Target부분을 살펴보니 array(0)으로 조회가 되었습니다. 즉 값이 없는 것이 맞다는 것이죠.

그렇다면 v-if문과 v-else문이 정상동작을 하지 않은 것은, 제 구문의 문제라는 의미겠죠?

저는 university 값이 없을 경우에 문구를 출력하고 싶었기에 Object.keys()를 통해 해당 객체의 key값에 접근하는 게 올바른 접근이었습니다. 따라서 해당 v-if문을 아래와 같이 수정해야 했습니다.

<template>
    <div v-if="Object.keys(props.university).length > 0"> <!-- 배열로 인식하기에 0보다 크면으로 써줘야 한다. -->
        <div v-for="universities in props.university" :key="university.id">
            <p>{{ props.university['university_name'] }}학교 입니다.</p>
        </div>
    </div>
    <div v-else>
        <p>저장된 정보가 없습니다.</p>
    </div>
</template>

 

객체의 값(value)을 쓸 때와 객체의 key를 쓸 때를 잘 구분해야 함을 배울 수 있었던 에러였습니다.

상세한 사유나 잘못 이해한 부분에 대해서 언제나 댓글 감사히 받고 있습니다. 마구 남겨주세요 :)

오늘도 누군가에게 시간을 절약할 수 있을 정도의 도움이 되었길 바라며 하트와 댓글 부탁드려요.

좋은 하루 보내세요😉