Vue3 [Issue] 체크박스로 함께 익히는 props, emit

jinvicky·2024년 12월 13일

Front-End (Vue3, React, TypeScript)

목록 보기

26/26

Intro

난 지금 프로젝트를 개인 서버에 데모로 띄우기 위한 작업을 하고 있다. 외부 기능과 인증을 전부 제거하고 코드를 수정하는 작업인데
기왕 하는 김에 기존에 생겼던 궁금증들 조금씩 풀면서 하고 있다.

여하튼, 작업하면서 체크박스가 매우 거슬렸다.
더 간결하고 직관적으로 코드는 고쳤는데 막상 새로고침했을 때 ui에 왜 바로 적용이 안되지? (한 올해 봄에도 이런 고민을 했었던 걸로 기억한다)

그 때는 내가 스토어를 써서 무슨 싱크가 안 맞느니 그런 생각을 했었는데 지금 드는 생각은
=> 스토어를 쓸 놈이 아니다. 메뉴만 숨김처리할 거면서
=> ❌ 렌더링 시점이 안 맞는다 이런 이슈가 아니다.

Error

만났던 에러들과 잘못된 방법들을 이야기해보고자 한다.

Unexpected-mutation-of-prop

vue를 하면서 이 에러를 처음 접했다. 코드로 설명해보겠다.

<input 
		type="checkbox" 
        id="toggleButton1" 
        v-model="props.boardDisplay.N"
        @change="changeEvent('공지사항');"
        @keydown.enter.prevent="changeEvent('공지사항')" 
/>

💔 v-model 속성에 props의 데이터를 바인딩하면 에러가 발생한다.

v-model에 상태값을 넣으면 setState()등의 함수를 사용하지 않고도 자동으로 상태의 값이 변경된다.

다시 생각해보니 내가 props를 내려받는데 setter를 쓰지 않고 직접 수정하려 한 행동과 같으니 당연한 것이겠다;;

부모에서 자식으로 함수 내리기

this.$emit()도 많이 쓰더라. 근데 난 그냥 props로 함수 내리는 것을 선호했는데 :랑 @ 가 헷갈려서 에러로 또 고생했다.

그냥 함수로 내리고 싶으면 아래처럼 하면 된다.

:putBoardDisplay="putBoardDisplay"

boolean state 출력하기

boolean 타입의 상태를 html 상에서 출력하려면 .valueOf()를 사용해야 한다.

{{ noticeStatus.valueOf()}}

not working

const wallStatus = ref(props.boardDisplay.W);

상태를 props의 값으로 생성시 초기화하려고 했다. 결과적으로 안된다.

// onMounted(() => {
	// 	noticeStatus.value = props.boardDisplay.N;
	// 	wallStatus.value = props.boardDisplay.W;
	// });

onMounted 시점에 props의 값을 갱신해볼까도 시도했었다.
내 경험으로는 v-model 쓰면서 이걸 해봤자 안 먹힌다.
(틀렸다면 알려주세요)

최종

내 최종은... v-model 나가라... noticeRef.value.checked로 판별했다.

퍼블리싱 ui를 고려해서 :checked에 props 데이터를 넣는다. (기존에 on이었다면 체크드 상태가 될 것이다.)
사용자가 off로 바꾸면 noticeStatus는 기본값인false 를 유지하다가 다시 on으로 바꾸면 noticeStatus는 true가 된다.

const wallStatus = ref(false); // 기본은 off로 설정한다. 

<input 
		type="checkbox" 
        id="toggleButton1" 
		ref="noticeRef"
        :checked="props.boardDisplay.N"
        @change="changeEvent('공지사항');"
        @keydown.enter.prevent="changeEvent('공지사항')" 
/>