[ Vue ] 객체 타입의 props의 초기값 설정

interface Props {
  myObj?: { name: string, icon: string };
}

 

const props = withDefaults(defineProps<Props>(), {
	myObj: { name: '', icon: '' },
});

 

optional props를 작성하면 초기값을 설정해주는 것이 권장된다.

그러나 이때 객체 타입의 props의 초기값을 저렇게 단순하게 설정하게 되면 eslint 에러가 나게 된다.

 

Type of the default value for 'myObj' prop must be a function.

 

기본값 객체는 공유된다.

즉, { name: ‘’, icon: ‘’ } 를 여러 컴포넌트 인스턴스에서 동일하게 참조하기 때문에, 한 곳에서 해당 객체가 바뀌면 모든 곳에서 변경이 일어난다.

 

그렇기 때문에 함수를 통해 반환하는 방식으로 설정하는 것이 안전하다.

const props = withDefaults(defineProps<Props>(), {
  myObj: () => ({ name: '', icon: '' }),
});

이렇게 함수로 작성하게 되면 각 컴포넌트 인스턴스마다 독립적인 객체가 생성된다.

결과적으로 다른 컴포넌트 인스턴스 간의 객체 참조 부작용을 방지할 수 있다.

 

 

 

근데 사실 props는 보통 읽기 전용으로 사용하니까,,,, 극단적으로 눈에 띄는 참조 오류는 발생하지 않음

하지만 만일을 대비하여 저렇게 쓰자…