[반복되는 코드 줄이기] - Object.values, keys #리액트 1차 개인과제

간단한 과제 소개

• todoList 형태의 메달(금, 은, 동) 데이터 관리 페이지
• 국가 및 메달 개수 입력 가능
• 입력한 국가별 메달 현황 확인
• 입력, 삭제, 수정, 정렬

---

페이지 레이아웃은 위와 같다. 상단에 데이터를 입력, 수정할 수 있는 폼이 있고 하단에 테이블 형태로 list를 확인할 수 있다. list 영역에서 반복가능한 데이터는 크게 2가지가 있다. 첫 번째는 헤더 부분 "국가명 금 은 동 액션"이 있고 두 번째는 각 나라별 데이터 목록이다. 우선 두 번째 데이터 목록 부분부터 어떻게 반복시킬수 있을지 살펴 보자. 

 

💡 행 반복 + 열 반복 - Object.values()

데이터 한 줄 한 줄이( "미국 132 0 0 버튼" ) 하나의 행이다. 전체 데이터 구조는 배열내의 객체들로 이루어져 있다. 

countries = [
  {
    name: '미국',
    gold: 132,
    silver: 0,
    bronze: 0,
  },
  {
    name: '대한민국',
    gold: 123,
    silver: 1,
    bronze: 44,
  },  
]

위와 같이 데이터가 추가된다고 할 때 행을 반복문으로 출력하는 것은 필수이다. 

countries.map(country => {
  return  <div className='info-box'>
    <p>{country.name}</p>
  </div>
  <div className='info-box'>
    <p>{country.gold}</p>
  </div>
  <div className='info-box'>
    <p>{country.silver}</p>
  </div>
  <div className='info-box'>
    <p>{country.bronze}</p>
  </div>
 /* 이하 생략 */

이렇게 작성하면 `countries`안의 객체를 한 줄씩 반복하면서 처리되게 된다. 하지만 위의 코드를 살펴보면 또 다르게 반복할 수 있는 코드가 보인다. `<p>` 태그 안의 내용을 제외하면 그 외의 코드는 전부 동일하다. `<p>` 태그의 내용도 반복 시킬 수 있을 것 같다. 이 때 `Object.values()`를 사용하면 객체안의 `값` 들만 배열로 변환시켜준다. 

 

예를 들어 아래와 같은 데이터가 있다고 가정해보자. 

contry = {
  name: '미국',
  gold: 132,
  silver: 0,
  bronze: 0,
}

위의 `country` 객체를 `Object.values(contry)` 를 이용해서 배열로 변환하면 아래처럼 변환시켜준다. 

['미국', 132, 0, 0]

 이제 위의 변환 된 데이터를 이용해서 반복시켜보자. 

{countries.map(country => {
  return <div className='country-container'>
      {
          Object.values(country).map((item, index) => {
              return (
                  <div key={index} className='info-box'>
                      <p>{item}</p>
                  </div>
              )
          })
      }
      /* 이하 생략 */

• `contries(국가별 행 데이터)` 를 map으로 반복시켜 `country` 객체로 데이터를 뽑아쓸 수 있다. 
• 뽑아낸 `country` 객체의 `값`들을 다시 한 번 배열로 변환하고 `item` 변수로 데이터를 사용한다. 

---

 

💡 Object.keys()

리스트의 헤더 부분도 한번 살펴보자. 

<div className="header-box"><h4>국가명</h4></div>
<div className="header-box"><h4>금</h4></div>
<div className="header-box"><h4>은</h4></div>
<div className="header-box"><h4>동</h4></div>
<div className="header-box"><h4>액션</h4></div>

마찬가지로 `<h4>` 태그 안의 텍스트를 제외하면 전부 동일하다.  반복할 수 있는 여러가지 방법이 있겠지만 `Object.keys()` 를 사용해보고자 객체를 통해 반복하기로 했다.

 

const headerTitle = {
    name: '국가명',
    gold: '금',
    silver: '은',
    bronze: '동',
    action: '액션',
}

`headerTitle` 객체를 생성했다. `Object.keys()` 를 통해 반복하게 되면 다음과 같은 배열로 변환 된다.

 

['name', 'gold', 'silver' ...]

이제 map을 이용해 반복하면서 headerTitle['key'] 와 같은 형태로 꺼내 쓰면 된다.

 

Object.keys(headerTitle).map((item, index) => {
  return <div key={index} className="header-box"><h4>{headerTitle[item]}</h4></div>
})

사실 이렇게 단순한 반복을 객체로 만들어서 할 필요는 없지만 메서드에 익숙해져보고자 사용해보았다.