[React] 값이 없는 상태를 어떻게 관리해야 할까? undefined와 null

 

 

개발을 하다 보면, 필연적으로 '값이 없는 상태' 를 관리해야 하는 경우가 생긴다.

이 때, undefined를 쓰는 게 좋을까, null을 쓰는 게 좋을까? 

 

---

 

먼저, undefined와 null에 대해 알아보자.

 

undefined와 null의 차이

1. undefined
   • 변수가 선언되었지만 초기화되지 않은 상태.
   • 값이 아예 없음을 나타냄.
   • 타입스크립트에서 Optional 속성(?)의 기본 상태.
2. null
   • 의도적으로 "값이 없음"을 명시.
   • 값이 존재하지 않음을 프로그래머가 명시적으로 설정한 상태.

---

 

 

아하, 그러니까 undefined는 '변수가 선언되기만 한 상태' 이고, null은 '값이 없다는 것을 넣어준 상태' 이다.

 

즉 undefined는 '데이터의 상태를 초기화하지 않은 상태(어떠한 값도 넣지 않은 채)로 남겨두는 경우이며,

null은 '이 변수에 아직 적절한 값을 할당하지 않았습니다' 를 "명시적" 으로 넣어둔 상태라고 할 수 있겠다.

 

이제 어떤 상태에서 undefined를 사용할지 , 또 어떤 상태에서 null을 사용할지만 결정하면 된다.

 

---

 

로그인 api를 불러와서, 로그인 한 유저의 데이터를 변수에 넣어준다고 가정해보자.

다음과 같은 변수와 데이터들이 존재할 것이다.

 

• accessToken
• refreshToken
• userName
• phoneNumber

 

이 중, 'phoneNumber'은 '본인인증을 한 유저에게만 존재하는 값' 이라고 가정해보자.

그럼, 'phoneNumber' 은 '로그인을 한 유저에게 존재하는 변수이되, 값이 없을 수도, 있을 수도 있는 변수' 가 된다. 그러니까, null이거나 string이 들어있는 둘 중 하나의 상태인 것.

 

의도와 컨텍스트에 따라 undefined과 null 중 사용 여부를 나누어 보자면, 다음과 같이 정리할 수 있다.

 

컨텍스트에 따른 선택

1. undefined를 사용할 때

• 데이터의 상태를 초기화하지 않은 상태로 남겨두는 경우.
• 타입스크립트의 Partial 또는 선택적 속성(?)과 자연스럽게 호환된다.
• 대부분의 상황에서 "아직 값을 모르는 상태"를 나타낼 때 적합.

type User = {
  accessToken?: string; // 값이 없을 때 undefined
};

2. null을 사용할 때

• 값이 없다는 것을 명시적으로 나타내야 하는 경우.
• 데이터베이스나 API와 통신할 때, null이 사용될 가능성이 있는 경우.
• "값이 없음"을 구체적으로 구분하고 싶을 때 적합.

type User = {
  phoneNumber: string | null; // 값이 없음을 명시적으로 표현
};

 

 

 

즉, 이해하기 편하게 정리하자면 다음과 같다. 

 

 

1. undefined로 초기화할 속성
   • ID, 이름, 토큰 등 상태 초기화 시 값을 모르는 것이 자연스러운 속성.
   • 대부분의 속성(uuid, userNo 등)에 대해 값이 초기화되지 않았음을 나타낼 때.
   • 명시적으로 "알 수 없는 상태"를 표현하고 기본값으로 유지.
2. null로 초기화할 속성
   • 연락처처럼 데이터베이스나 API에서 값이 없음을 명시적으로 나타내야 하는 속성.
   • 즉, 특정 속성(attlistMbtlNo, mbtlNo)이 API 설계나 도메인 모델에서 값이 없음을 명시적으로 표현할 때

 

 

 

즉, '아직 로그인이 되지 않아 값이 없는 것들' 은 undefined로 두되, phoneNumber처럼 '로그인 한 유저의 데이터 베이스에 null이 들어있을 수도 있는 값' 은 NULL로 설정하면 코드를 읽는 것만으로 값의 null 여부를 알 수 있어 편리하다.