React - React 를 사용하기 위해 되짚어보는 JavaScript 기초 (7)

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 JavaScript 를 사용하면서 가장 지겹게 다루게 될 Array, 즉 배열 내장함수를 다루는 기본적 사용방법을 다루어 보도록 하겟습니다.

배열 내장함수가 참 많은 역활을 하고 있기 때문에, 이 기본적 사항은 이해하는것이 이후 코드 작성에 많은 도움이 되리라 생각합니다.

 

그럼 시작해보겠습니다.

 

 

1. forEach

 

기존의 조건문, 반복문을 이용해 배열을 순회하기 위해서는 다소 코드가 길어지는 문제가 있습니다.

길다고 나쁜 코드가 아니라, 효율적이지 못한 부분이 존재하기 때문입니다.

먼저 간단한 예시를 들어보겠습니다.

let A = [1, 2, 3, 4, 5];
for (let i = 0; i < A.length; i++) {
  console.log(A[i]);
}

위의 예시에서는 A라는 배열을 반복문을 이용하여 순회하는 함수를 작성하였습니다.

이를 내장함수로 작성하면 보다 간편하게 작성할 수 있습니다.

이는 내장함수이기때문에, 점 표기법으로 쉽게 호출할 수 있습니다.

 

let A = [1, 2, 3, 4, 5];

A.forEach((item) => {
  console.log(item);
});

위와 같이 작성하면, 배열의 Index, value 를 표기하는 형태로 반복문과 동일한 역활이 이루어집니다.

이 구성을 살펴보면 " => " 라는 화살표 함수를 사용하여, callback 함수로 동작하는 구성이 이루어집니다.

 

여기서 forEach 의 item 은 값을 가지고 반복하는 형태의 처리가 되는 것이죠

만약 이 배열의 값에 무언가의 연산을 추가한다면 아래와 같이 간단하게 처리할 수 도 있습니다.

let A = [1, 2, 3, 4, 5];
let B = [];

A.forEach((item) => {
  B.push(item * 2);
});

console.log(B);

이렇게 하면, B라는 배열에 각 값에 2를 곱한 값을 새로운 배열에 담는 것이죠.

하지만 이를 더 효율적으로 사용하기 위해서 두번째 내장함수를 사용할 수 있습니다.

 

2. map

 

map 내장함수를 정말 많이 사용하게 될 겁니다.

map 의 특성은 return 을 사용할 수 있습니다. 이 내장함수의 특징은, 각 값을 return 을 받기 때문에, 위와 같이 push가 아니더라도, 처리할 수 있습니다.

 

즉 map 의 특징은, 원본 배열의 모든 요소를 순환하여 연산 후, return 된 값을 반환하는 함수입니다.

즉 위의 forEach 를 map 을 사용하면 아래와 같이 구현할 수 있습니다.

 

let A = [1, 2, 3, 4, 5];
let B = A.map((x) => x * 2);
console.log(B);

훨씬 짧고 간결한 코드가 되었습니다.

map 은 사용하기에 따라서 매우 좋은 내장함수라고 할 수 있고, 실제 저도 많이 사용하는 내장함수였습니다.

 

3. includes

 

이 내장함수는 배열에 원하는 값이 포함되어 있는지를 확인할 때 사용할 수 있습니다.

다만 이 includes 의 동작방식은 이전의 연산자 중 , 비교연산자로 배웠던 "===" 과 같은 역활을 합니다.

따라서 데이터타입역시 일치해야 true/false 를 반환하는 내장함수입니다.

 

이를 간단하게 구현하면 아래와 같이 구현할 수 있습니다.

 

let A = [1, 2, 3, 4, 5];
let number = '5';

console.log(A.includes(number));

위와 같이 작성하면, number 는 문자열 방식의 5입니다. 하지만 A 배열에는 숫자의 5가 들어가 있으므로, false 가 반환됩니다.

number 를 만약 숫자로 바꾸게되면, 올바르게 true 가 표시될 것입니다.

 

4. indexOf 

 

이 indexOf 는 위의 includes 와 다르게 내가 찾는 값이 있는지 없는지를 보여주는 것을 넘어서, 배열의 어떠한 인덱스인지를 알려줍니다.

includes 보다는 쉽게 사용이 가능하겠습니다.

하지만 이 사용에서는 결과값에 대해서 한가지 알아야 할 사항이 있습니다.

let A = [1, 2, 3, 4, 5];
let number = '5';

console.log(A.indexOf(number));

위와 같이 출력시 값은 "-1" 이 표시됩니다.

즉 위의 includes 와 같이 비교를 하여 출력을 하지만, 실제 없는 값일 경우, undefined 가 아니라, -1 이라는 인덱스 값을 출력합니다.

하지만 Array , 배열의 특성상 인덱스의 시작은 0부터 시작입니다. 

 

즉, -1 로 표기되는 것은 배열에 없다라는 것을 의미합니다. 

하지만 이제, 원시형데이터를 가지고 있는 배열이 아닌, 객체 배열과같은 중첩형 구조일 경우, 어떻게 접근해야 쉬운지 알아보도록 하겠습니다.

 

5. findIndex

 

먼저 예시 객체를 가진 배열을 생성해보도록 하겠습니다.

let A = [
  {name: 'A'},
  {name: 'B'},
  {name: 'C'},
  {name: 'D'},
  {name: 'E'},
];

이제 이를 작성하는 방법의 예시를 찾아보도록 하겟습니다.

console.log(A.findIndex((item) => item.name === 'C'));

위의 내장함수의 동작방식은 아래와 같습니다.

 

먼저 A라는 배열에 findIndex 내장함수를 호출하고, 화살표 함수로 item은 각 배열의 객체들을 의미합니다. 여기서 객체의 name 이 "C" 와 일치하는 index 를 반환하도록 하는 함수가 바로 findIndex 입니다. 

이렇게 하면, 객체와 같은 형태의 배열에서도 손쉽게 인덱스를 반환할 수 있습니다.

 

한가지 주의해야 할 사항은, 배열을 순회(반복)하여 찾기 때문에, 동일한 값이 2개 이상 존재하면, 가장 앞의 값의 인덱스를 반환하게 됩니다.

이러한 점은 값을 반환 후 한번쯤 검사를 해야 합니다.

이러한 값을 직접적으로 접근하려면 아래와 같이 응용할 수도 있습니다.

console.log(A[A.findIndex((item) => item.name === 'C')]);

 

하지만 이는, 요소의 인덱스만을 사용하는 것이므로, 인덱스 내의 값을 보려면 한번 더 거쳐야 하는 작업이 필요합니다.

이전  포스팅에서 사용했던 A.lndexNumber 와 같이 말이죠.

이를 위해서 사용하는 내장메서드는 바로 find 입니다.

 

6. find

 

기본적인 사용방법은 위의 findIndex 와 동일하게 작성됩니다.

아래의 방법으로 작성할 수 있습니다.

 

const result = A.find((item) => {
  return item.name === 'C';
});

console.log(result);

 

이후의 편의를 위해, 별도로 정의하고 console 을 출력한 내용입니다.

위의 findIndex 와 크게 다르지 않은 작성형태를 띄고 있습니다. 

findIndex 와 find 를 그대로 작성하면 아래와 같이 작성하게 됩니다.

 

const result = A.find((item) => {
  return item.name === 'C';
});

console.log(result); // {name : "C"}


const result = A.findIndex((item) => {
  return item.name === 'C';
});

console.log(result); // 2

즉, 인덱스만 필요한 상황이라면 findIndex, 값이 필요하다면 find 를 사용하면 되겟습니다.

 

7. filter

 

먼저 filter 를 위해 배열에 몇몇 데이터를 추가하여 아래와 같이 작성했다고 가정하겠습니다.

새롭게 color, grade, group 을 설정했습니다. 

let A = [
  {
    name: 'A',
    color: 'red',
    grade: 1,
    group: 'B',
  },
  {
    name: 'B',
    color: 'blue',
    grade: 2,
    group: 'B',
  },
  {
    name: 'C',
    color: 'green',
    grade: 3,
    group: 'A',
  },
  {
    name: 'D',
    color: 'yellow',
    grade: 4,
    group: 'A',
  },
  {
    name: 'E',
    color: 'pink',
    grade: 5,
    group: 'A',
  },
];

이후에 실제 데이터에서는 배열에 있는 요소들이 객체형태로 많은 값을 Key-value 값을 가지게 될 것입니다.

하지만 우리는 이 데이터를 매번 다 필요로 하는 것이 아니라, 일부 그룹에 맞는 데이터, (ex. 사용자 검색) 과 같은 유형으로 처리를 해야할 수 있습니다.

그러려면, 이 배열들 중에서 내가 지정한 값을 필터링 해야 하는 상황이 발생합니다.

그럴 때 사용하는게 filter 메서드 입니다.

 

이제 이를 사용하면 아래와 같이 작성할 수 있습니다.

const result = A.filter((item) => item.group === 'A');

console.log(result);

이 Filter 를 사용하면 결과 값이 아래와 같이 출력됩니다.

즉, 결과 역시도 배열로 나타나므로, 이를 사용하기가 간편합니다.

[
  { name: 'C', color: 'green', grade: 3, group: 'A' },
  { name: 'D', color: 'yellow', grade: 4, group: 'A' },
  { name: 'E', color: 'pink', grade: 5, group: 'A' }
]

 

위에서 Filter 를 활용하면 검색 로직에 다양한 활용이 가능합니다. 예를들어,  각 배열 내의 존재하는 객체의 Key 가 제목, 내용, 해시태그와 같은 다양한 요소들을 검색하고 해당하는 결과를 출력할 수 있게 됩니다.

실제 웹 페이지에서 검색을 처리하는 요소는 이러한 방식으로 동작하는것이 가장 기본적인 방법이라고 할 수 있습니다. 

 

물론 실제 DB가 있다면, backend 에 이를 넘겨서 Database 에 맞는 구문을 작성해야 하겠지만 말입니다.

 

8. slice & concat

 

JavaScript 의 method 명칭은 영어 단어의 뜻 의미와 통하는 것들이 많습니다.

Slice 는 말 그대로, 자르다의 의미이기 때문에, 실제 배열의 요소를 "자르다" 라는 의미입니다.

기본적으로 배열의 내장함수들은 배열로 결과를 반환하는 것이 일반적입니다. 

 

이를 사용하는 기본 방법은 아래와 같습니다.

 

const result = A.slice(0, 3);

console.log(result);

사용방법은 간단합니다. slice 는 시작할 배열의 인덱스번호가 되겠습니다. 즉 0번부터 시작하게 됩니다.

두번째 인자는 slice 할 "갯수"를 의미합니다. 현재 위의 코드에서는 0번째 인덱스부터 3개의 요소를 잘라서 출력합니다.

즉 결과는 아래와 같이 나타납니다.

 

[
  { name: 'A', color: 'red', grade: 1, group: 'B' },
  { name: 'B', color: 'blue', grade: 2, group: 'B' },
  { name: 'C', color: 'green', grade: 3, group: 'A' }
]

slice 가 자르기라면, 합치기도 가능합니다.

바로 concat 이라는 메서드를 사용할 수 있습니다.

연결하다라는 의미를 가지고 있는 이 단어를 사용하면 여러개의 배열을 하나로 합칠 수 있습니다.

 

작성예시는 아래와 같습니다.

 

let B = [
  {
    name: 'A',
    color: 'red',
    grade: 1,
    group: 'A',
  },
];

const result = A.concat(B);

console.log(result);

임의의 배열을 하나 만들어, A라는 배열에 concat 을 사용하여 매개변수로 B라는 배열을 추가하면 끝입니다.

간단하게 사용할 수 있는 내장함수입니다.

 

9. Sort

 

Sort 는 배열의 값들을 비교하여, 오름차순, 내림차순으로 정렬하는 내장함수입니다.

기본적으로 이는 문자열을 기준으로 동작하게 되어, 문자열은 오름차순이지만, 숫자의 경우 한번의 가공이 필요합니다.

 

작성 예시를 보고 살펴보도록 하겠습니다.

기초적인 예시이므로, 활용은 상황에 따라 다를 수 있습니다.

 

let A = [5, 2, 34, 1, 25, 23, 5, 23, 41, 34, 35, 23, 523, 42, 34];
const resultA = A.sort((a, b) => a - b);

let B = ['c', 'w', 'e', 'w', 'f', 'w', 'f', 'e', 's', 'f', 's', 'w'];
const resultB = B.sort();

console.log(resultA);
console.log(resultB);

위를 살펴보면 먼저 숫자의 경우 sort 메서드 내에서 a,b 두개의 매개변수를 받고, a-b 를 사용하여 음수,양수 여부에 따라 값을 정렬하는 기본적인 코드를 구현합니다. 

반면, 문자열의 경우, 별도의 매개변수 없이 sort 메서드만으로도 동작하는 모습을 볼 수 있습니다.

 

10. Join

 

이제 배열을 한번에 출력하는 method 입니다.

배열의 있는 다양한 요소를 한번에 출력하기 위해서는 몇가지 작업이 필요합니다.

위의 내용만을 가지고 할때는 각 배열의 요소마다 출력을 해야 하지만, 내장함수를 사용하면 간편하게 작성할 수 있습니다.

 

let A = ['안녕하세요', 'Hynn의', '블로그입니다.'];

const result = A.join();
console.log(result);

// 안녕하세요,Hynn의,블로그입니다.

 

하지만 이렇게 하면 요소 사이마다 "," 가 표시되어 보기 불편할 수 있습니다. 이럴 때는 join method 내에 어떠한 구분자로 붙여줄지만 지정하시면 됩니다.

let A = ['안녕하세요', 'Hynn의', '블로그입니다.'];

const result = A.join(' ');
console.log(result);

//안녕하세요 Hynn의 블로그입니다.

join 내에 공백만 넣어주더라도, 아래와 같이 깔끔하게 완성이 됩니다.

 

여기까지 React 에서 자주사용하는 내장함수 위주로 알아보았습니다.

이제 간단한 응용작성 후, 간단한 React 프로젝트를 하나 구현해볼 예정입니다.

 

주중에 코로나로 상태가 좀 안좋았다보니 완성이 늦어졌습니다.

다음 포스팅에서 뵙겠습니다.