model에서 타입 정의할 때 types.optional 차이점

이제 막 1년이 넘어 2년차 프론트엔드 개발자가 되었다. 점점 더 궁금한 부분들이 많아 찾아보게되는데 대부분 일을 관리하는 개인 노션에 적다보니 아쉽다는 생각이 들어 블로그에도 적어보려 한다.

오늘 찾아본 소소한 궁금증은 파라미터의 타입을 정의할 때 types.optional의 역할이다.

타입을 정의할 때 같은 string이더라도 어떻게 정의하는지 다르다.

a: types.maybeNull(types.optional(types.string, '')),
b: types.optional(types.maybeNull(types.string, '')),
c: types.maybeNull(types.string)

types.optional는 기본값을 어떻게 세팅하는지에 영향을 준다

1.types.maybeNull(types.optional(types.string), '')

• 속성이 문자열을 가질 수 있으며, 값이 제공되지 않을 경우 기본값으로 null이 아닌 빈 문자열로 설정
  즉, 기본값은 빈 문자열이 아닌 null이 되고, 속성이 문자열을 가질 수 있는 것을 의미한다.

javascript

const MyModel = types.model({
  myProperty: types.maybeNull(types.optional(types.string), ''),
});

2.types.optional(types.maybeNull(types.string), '') (기본값이 빈 문자열)

• 속성이 null 또는 문자열을 가질 수 있으며, 값이 제공되지 않을 경우 빈 문자열로 기본값을 설정한다는 것을 의미한다.

const MyModel = types.model({
  myProperty: types.optional(types.maybeNull(types.string), ''),
});

3. types.maybeNull(types.string) (기본값 없음)

• 속성이 null 또는 문자열을 가질 수 있다는 것을 나타냄 그러나 명시적인 기본값이 없으므로, 속성이 null일 경우 디폴트로는 null이 되는 것을 의미한다

const MyModel = types.model({
  myProperty: types.maybeNull(types.string),
});

단순한 string타입이더라도 기본값이 null인지, ''인지, 둘다 가능한지 등에 따라 프론트엔드에서는 노출되는 기준에서 버그가 충분히 생길 수 있기 때문에 주의하자!