React undefined / empty / null

undefined, empty, null

# 시작하며

리액트로 JS를 사용하여 개발을 진행하다 보면, 생각보다 빈 배열이나 빈 공간에 대한 처리를 해 주어야 하는 경우가 많이 발생한다. 개발 중 화면이 다운되는 대부분의 이유는 이러한 빈 공간 처리를 제대로 해 주지 않았거나, 원하는 내용의 데이터를 받아오기 전에 해당하는 배열의 element를 호출했기 때문이었다. 따라서 오늘은 이러한 배열의 빈 공간 처리에 대해 알아볼 것이다.

 

 

# 빈 공간, 빈 배열

그렇다면 위에서 언급한 빈 배열과 빈 공간에 해당하는 것은 무엇이 있을까?

• undefined

JS에서 기본형 데이터 타입에 속하며, undefined라는 말 그대로 정의되지 않고 비어있다는 의미를 가진다. 사용자가 명시적으로 지정을 하지 않으면, 비어있는 요소에 접근했을 시에 JS 엔진에서 undefined를 부여하게 된다.

var sample1;
let sample2;
var sample3 = undefined;

console.log(sameple1, sample2, sample3);

다음 코드는 결론적으로 sample 세 가지 모두 undefined로 print 된다.

 

이러한 경우 말고도, 객체 배열에서 특히 객체를 호출하여 존재하지 않는 key값을 부르거나 사용할 때 undefined가 자주 발생한다. 

const [sample, setSample] = useState({
  a: "example1",
  b: "example2",
});

console.log(sample.a, sample.b);
console.log(sample.c);

해당 코드가 앞서 말한 상황을 잘 보여준다. sample 객체 배열 내부에 선언되어 있는 key 값인 a, b는 자신의 value값을 잘 print 하는 반면, 존재하지 않는 key값인 c를 호출하여 print 한 경우에는 undefined가 발생한다. 이러한 경우는, component를 사용하여 다양한 이미지나 문자를 페이지에 띄울 때 자주 발생하는 실수로서 주의하여 사용하여야 한다.

 

 

• empty

undefined가 정의를 하지 않거나 없는 정보라면, empty는 이와 다르게 빈 공간이 할당되는 것이다. 즉 공간은 존재하지만 그 속은 비어있는 상태라 할 수 있다. 보통 배열을 선언할 때, 빈 배열로서 빈 공간이 형성된다. 빈 배열의 경우 값을 대입하지 않았을 때는 자동으로 해당 element에 undefined가 지정된다.

var sample1 = new Array(5);
console.log(sample1);

다음과 같은 코드를 예로들면, sample이라는 변수에 5개의 빈 공간을 가진 할당함으로써 빈 배열이 형성된다. 

따라서 해당 코드를 실행하면, 다음과 같이 빈 공간 5개를 가진 배열이 생성되는 것이다.

var sample1 = [];
console.log(sample1);

또한 간편하게 다음과 같은 코드처럼 []를 통해 배열을 선언하여 빈 공간을 할당해줄 수도 있다.

 

 

• null

null은 기본적으로 undefined와 같은 의미를 가지고 있으며, 명시적으로 비어있다고 의미를 부여할 때 사용한다. 개인적으로 undefined보다 null을 사용하여 통일하는 것이 비어있는 두 가지 요소에 대한 구분을 하기에 편리하였다.

 

 

 

# 빈 값 처리

기본적으로 빈 공간이나 빈 값들은 에러를 발생시키기 쉽다. 따라서 항상 코드를 작성할 때, try, catch와 같은 오류 방지하기 위한 장치를 마련해 두어야 원만한 서비스 이용이 가능해진다. 따라서 빈 값을 제거하거나 처리하는 방법은 어떤 것이 있는지 알아보자.

 

• filter 함수 사용

JS의 filter함수는, 배열에서 특정 조건에 부합하는 값을 찾아, 그 값으로 새로운 배열을 리턴한다. 따라서 해당 함수를 사용하여 배열 중 undefined나 null과 같은 빈 값을 찾고 해당 요소들을 제외한 새로운 배열을 return 하는 과정으로 제거할 것이다.

const sample = [1, undefined, null, false, true, " "];

const newSample = sample.filter((ele, idx) => ele !== undefined );

console.log(newSample);

위 코드는 선언된 배열 sample에서 undefined를 제거하는 과정을 나타낸 것이다. filter 함수로 전달 된 callback함수는 element가 undefined가 아닐 경우에만 배열 값을 리턴하여 변수 newSample은 [1,,null, false,,true, " "] 값을 가지게 되는 것이다. 

 

이와 다르게, undefined와 null 두 가지 모두 제거하고 싶은 경우에는, filter함수 내부 조건을 [ele != null]로 변경하면 된다.

* '=='와 '==='의 차이

React ForEach, Map

 

그렇다면 undefined와 null의 경우에는 위와 같이 제거를 진행하면 되는데, 빈 공간 empty는 어떠할까?

 

const sample = [1, undefined, null, , " "];

빈 공간의 경우, 위 sample 배열의 3번째 index를 가진 부분을 지칭하는데, 이러한 빈 공간도 처리를 해야 하는 경우가 발생한다.

 

const sample = [1, undefined, null, , " "];

sample.filter((ele,indx) => console.log(indx));

다음과 같이 filter 함수를 사용하여 빈 공간이 포함된 배열의 인덱스를 print 하면 어떻게 될까? 결과는 [0, 1, 2, 4]와 같이 빈 공간의 인덱스 3을 제외한 값만 나오는 것을 확인할 수 있다. filter 함수는 값이 할당되지 않는 index를 순회하지 않는 특성을 가지기 때문에 해당 특성을 이용하여 배열에서 빈 값을 제거할 수 있다.

 

 

const sample = [1, undefined, null, , " "];

const newSample = sample.filter((ele,indx) => true);
console.log(newSample);

따라서 다음과 같이 filter 함수를 통해 빈 공간을 제거한 결과를 아래 사진에서 확인할 수 있다.

그렇다면 이러한 빈 공간과 빈 배열을 한꺼번에 모두 제거하는 방법은 어떤 것이 있을까? 사실 각각의 제거 방법도 중요하지만, 개발을 하는 입장에서는 한 번에 필요 없는 값들을 모두 제거하는 것이 필요하다. 이는 Falsy value를 사용한다. Falsy value란, 앞서 언급했던 빈 배열과 빈 공간처럼 boolean으로 값을 체크했을 때 false로 반환되는 값들을 말한다. undefined, null, false, empty 모두 이에 해당하기 때문에 Falsy value를 활용하여 이러한 값들을 모두 제거할 수 있다.

 

const sample = [1, undefined, null, false , " "];

const newSample = sample.filter(Boolean);
console.log(newSample);

따라서 위와 같이 코드를 작성한 후, 실행하면 아래와 같이 빈 공간이 모두 제거된 값을 반환받을 수 있다(' '는 empty가 아님).