한 입 크기로 잘라먹는 리액트반복문을 이용하면 배열과 객체에 저장한 값에 쉽게 접근할 수 있습니다.
배열과 반복문
배열은 순서대로 데이터를 저장하는 특징이 있습니다. 따라서 웹 서비스 게시판이나 피드의 게시물 리스트를 생성할 때 반복문과 결합해 자주 사용합니다. 배열과 반복문을 결합해 사용하는 방법에는 여러 형태가 있습니다. 가장 널리 활용되는 방법 몇 가지를 소개하겠습니다.
피드란?
피드란 콘텐츠를 스크롤해 볼 수 있도록 비슷하게 생긴 블록 을 나열해 놓은 것입니다. 여러 콘텐츠를 사용자가 쉽게 볼 수 있도록 만들었습니다. 인스타그램이나 페이스북이 대표적인 예입니다.
인덱스를 이용한 순회
배열에는 데이터의 저장 순서를 의미하는 인덱스가 있습니다. 인덱스를 0부터 1씩 증가하며 차례대로 데이터에 접근하면 배열의 모든 요소에 접근할 수 있습니다
코드를 불러오는 중 입니다 ...배열의 길이가 고정적이고 프로그램을 실행하는 과정에서 변경되지 않는다면, 이렇게 배열의 길이를 명시적으로 작성해도 됩니다. 그러나 자바스크립트의 배열은 저장 요소의 개수에 따라 길이가 자동으로 늘어나고 줄어드는 동적인 특징이 있기 때문에, 프로그램을 실행하는 과정에서 배열의 길이를 가늠 하기가 어렵습니다.
이때 프로퍼티
코드를 불러오는 중 입니다 ...length를 이용하면 쉽게 배열의 현재 길이를 알아낼 수 있습니다.프로퍼티 length로 배열의 현재 길이를 알 수 있으므로, 더 안전하게 for 문과 결합해 사용합니다.
코드를 불러오는 중 입니다 ...① 프로퍼티 length로 for 문의 조건식을 작성하면, 배열의 길이가 변동되어도 종료 조건에 맞게 배열 요소에 접근합니다. food.length가 3이므로 for 문은 인덱스 번호가 0, 1, 2일 때까지 순회합 니다.
for 문과 프로퍼티 length를 이용해 배열을 순회할 때는 한 가지 주의할 점이 있습니다. 프로퍼티 length는 배열의 길이를 반환할 뿐, 마지막 인덱스 번호는 반환하지 않습니다. 자바스크립트에서 인덱스는 항상 0부터 시작하므로 마지막 요소의 인덱스는 배열의 길이보다 1 작습니다. 따라서 반복문의 종료 조건은
i <= food.length가 아니라 i < food.length로 설정해야 합니다.for…of 문을 이용한 순회
프로퍼티 length를 사용하지 않고 배열을 순회하는 방법이 있습니다. for 문의 특수한 형태인 for...of 문은 배열을 더 간결하게 순회합니다.
코드를 불러오는 중 입니다 ...for...of 문은 for 문과 달리 of 뒤의 배열에서 요소를 하나씩 순서대로 꺼내 변수 item에 저장합니다. for...of 문을 이용하면 인덱스를 이용한 방식보다 더 간결하게 배열을 순회합니다.
객체와 반복문
자바스크립트로 프로그래밍하다 보면 배열이 아닌 객체를 순회하는 경우도 종종 발생합니다. 반복문을 이용해 객체에 저장된 프로퍼티를 순회하는 방법을 살펴보겠습니다.
Object.keys를 이용한 key 순회
객체 메서드인 Object.keys는 객체 프로퍼티의 key를 배열로 반환합니다.
코드를 불러오는 중 입니다 ...Object.keys 메서드는 인수로 전달한 객체에서 프로퍼티의 key만 배열로 만들어 반환합니다. 이렇게 만든 key 배열을 for...of 문으로 순회하겠습니다.
코드를 불러오는 중 입니다 ...① Object.keys 메서드는 인수로 전달한 객체에서 프로퍼티의 key만을 배열로 반환합니다. ② for...of 문으로 배열 keyArr를 순회하며 가져온 해당 key를 출력합니다.
이번에는 괄호 표기법으로 프로퍼티의 key뿐만 아니라 value도 불러오겠습니다.
코드를 불러오는 중 입니다 ...① 괄호 표기법으로 현재 key 프로퍼티의 value를 하나씩 불러옵니다.
Object.values를 이용한 value 순회
자바스크립트에는 Object.keys 말고도 프로퍼티의 value만 배열로 반환하는 Object.values 메서드가 있습니다. 이번에는 Object.values 메서드로 객체 프로퍼티의 value만 불러옵니다.
코드를 불러오는 중 입니다 ...① Object.values 메서드는 인수로 전달한 객체에서 프로퍼티의 value만을 배열로 반환합니다.
for...in 문을 이용한 순회
배열을 순회할 때의 for...of 문처럼, 객체를 순회할 때는 for...in 문을 사용합니다. for...in 문으로 객체를 순회하면, for 문보다 더 간결한 코드를 작성할 수 있습니다
코드를 불러오는 중 입니다 ...① for...in 문은 in 오른쪽에 있는 객체에서 프로퍼티의 key를 하나씩 순서대로 변수 key에 저장 합니다. 즉, 객체 프로퍼티의 key를 순회합니다.
for...in 문을 사용하면 Object.keys 메서드보다 더 간단하게 객체를 순회할 수 있습니다.