참조형 props의 default 값 설정하기

현재 작업 중인 프로젝트에 Typescript를 도입해서 사용 중인데
type-check를 해보니 정말 개판인거에요.(네. 제가 개판으로 사용했습죠...)
그래서 에러 뜬 파일들을 일일이 열어서 수정을 했는데...
소스도 깨끗하지 않더라고요.

props를 가져올 때의 default 값도 제각각~

머리를 쥐어 뜯는다.

 

대충 알고 막연하게 사용했던 자신을 반성하며...
정리를 해보았습니다!

여기서 default❗

defineProps({
  list: {
    type: Array as () => { label: string; value: number }[],
    default: () => []
  },
  paginationValue: {
    type: Object as () => PaginationValue,
    default: () => ({})
  },
})

 

다행히(?) 항상 함수형으로 가져와서 컴포넌트 간 이슈는 없었지만...

 

() => [], () => ([]), () => {}, () => ({})
너무 혼용해서 사용을 했었읍니다..

그래서 정리한 내용 ❗

 

📌 배열

🧿 default: []

• 정적으로 배열 리터럴을 기본값으로 설정한다.
• 문법적으로는 유효하지만, 배열이 참조형 데이터이므로, 모든 컴포넌트 인스턴스가 동일한 배열 참조를 공유하게 된다.
• 👉🏻 컴포넌트를 10번 사용하면 10개의 관련 데이터가 하나의 그릇([])을 사용한다니..끔찍

 

🧿 default: () => [] ⭕

• 컴포넌트 인스턴스가 생성될 때마다 새로운 배열을 생성하여 기본값을 설정한다.
• 각 컴포넌트 인스턴스는 독립적인 배열을 갖는다.
• * 참조형 데이터(배열, 객체 등)의 기본값으로 사용하는 것이 권장됩니다.

 

🧿 default: () => ([])

• default: () => []와 동일한 결과를 제공한다.
• 괄호를 추가한 것은 문법적인 차이일 뿐 기능상 차이는 없다.
• 객체 사용 시 객체 리터럴을 반환하기 위해 사용하는 거고, 배열에선 의미 없다.
• default: () => ([]) 이렇게 입력해도 prettier가 알아서 default: () => [] 이렇게 변환해 준다.

 

📌 객체

🧿 default: {}

• 정적으로 객체 리터럴을 기본값으로 설정한다.
• 👉🏻 배열의 경우와 마찬가지로 모든 컴포넌트 인스턴스가 동일한 객체 참조를 공유한다.

 

🧿 default: () => {}

• 빈 함수를 반환하는 함수이다.
• 값을 반환하지 않기 때문에 기본값이 undefined가 된다.

const fn = () => {};  // 빈 화살표 함수
console.log(fn());  // undefined

 

 

🧿 default: () => ({}) ⭕

• 빈 객체를 반환하는 함수이다.
• 컴포넌트 인스턴스가 생성될 때마다 새로운 빈객체를 생성하여 기본값을 설정한다.
• 각 컴포넌트 인스턴스마다 독립적인 객체를 가질 수 있어 참조형 데이터의 기본값으로 사용하기에 적합하다.

const fn = () => ({})  // 빈 객체를 반환하는 화살표 함수
console.log(fn());  // {}