React에서 (api 데이터) json형식 데이터 가져오기 및 원하는 데이터 추출 등 데이터 관리 방법!

프로젝트를 하다보면 작고 큰 데이터들을 가져다가 출력하고 수정하고 삭제하고 등등의 작업들을 처리한다.

(보통은 이런 작업들이 전체 작업의 주를 차지하는 것 같다..)

 

규모가 큰 데이터 혹은 등록, 수정, 삭제 등이 필요한 데이터는 당연히 api 통신을 통해 작업하는게 맞는데,

규모가 크지 않은 소소한 제품 데이터의 경우(별도의 추가나 수정이 필요없는)는 별도의 js 파일에 오브젝트 혹은 배열을 담은 변수로 관리 하곤 했다.

 

// Item.js

const Items = {
    data: [{
        name: '아메리카노',
        taste: '쓴 맛',
        type: ['아이스', '핫']
    }, {
        name: '라떼',
        taste: '고소한 맛',
        type: ['아이스', '핫']
    }, {
        name: '말차라떼',
        taste: '달콤한 맛',
        type: ['아이스']
    }]
}

export default Items

 

위와 같이 정리해서 각 컴포넌트마다 임포트해서 사용하는 편이었다.

사실 이건 백엔드를 할줄 몰라서(본인이..) 프론트단에서 빨리 처리하다보니 쓰던 방법인데.. 데이터베이스를 활용하는게 추후에 유지 보수하는 데에 더 좋긴 할 것 같다. 이외에는 백엔드 개발자와 Sequel Pro를 통해 함께 데이터베이스 관리를 하곤 했다.

 

근데 API 통신으로 데이터를 받으면 json 형태로 받기 때문에, 위의 예제처럼 처리하던 데이터 관리 방식을 동일하게 json 형식으로 정리하는게 낫겠다는 생각이 들었다.

 

// Item.json

{
    "아메리카노": {
        taste: '쓴 맛',
        type: ['아이스', '핫']
    },
    "라떼": {
        taste: '고소한 맛',
        type: ['아이스', '핫']
    },
    "말차라떼": {
        taste: '달콤한 맛',
        type: ['아이스']
    }
}

 

첫번째 예제처럼 data의 배열 형태로 넣어도 가능하지만, 원하는 데이터만 추출하는 예제를 짜기 위해 위처럼 정리해 봤다.

 

 

이렇게 api를 통해 받든, 직접 json 파일에 정리해서 받든, 어쨌든 데이터를 받으면 이를 원하는 대로 추출하고 출력해야 한다.

이때 주로 사용하는 메서드를 정리해 본다.

 

 

 

1. Object.keys()

 

keys 메서드는 데이터에서 key값만 반환한다.

 

위의 예제로 콘솔을 찍어보면

console.log(Object.keys(Item))

>> ['아메리카노', '라떼', '말차라떼']

 

이렇게 반환한다.

 

for(const key in Object.keys(Item)) {
	console.log(Item[key].taste)  // "쓴 맛", "고소한 맛", "달콤한 맛" 
}

 

사실상 키 값만 있다면 키 값에 해당하는 밸류 값을 가져오기 쉽기 때문에 요 메서드만 이용한다해도 자료 추출이 충분하다.

 

 

 

2. Object.values()

values() 메서드는 value 값만 반환하는 메서드이다.

 

위의 예제로 콘솔을 찍어보면

console.log(Object.values(Item))

>> [{taste: '쓴 맛', type: ['아이스', '핫']}, {taste: '고소한 맛', type: ['아이스', '핫']}, {taste: '달콤한 맛', type: ['아이스']}]

 

이렇게 반환한다.

 

let items = Object.values(Item);
console.log(`이곳의 음료는 총 ${items.length}가지가 있다.`)  // "이곳의 음료는 총 3가지가 있다."

 

 

 

3. Object.entries()

 

entries 메서드는 key와 value 한쌍의 값을 배열로 반환한다.

 

위의 예제로 콘솔을 찍어보면

console.log(Object.entries(Item))

>> [['아메리카노', {taste: '쓴 맛', type: ['아이스', '핫']}], ['라떼', {taste: '고소한 맛', type: ['아이스', '핫']}], ['말차라떼', {taste: '달콤한 맛', type: ['아이스']}]]

 

이렇게 반환한다.

 

위의 key와 value 값 모두를 출력해야하는 경우 유용하게 쓰인다. 혹은 특정 키값의 value만 추출하고 싶을 때도 유용하다.

for(const [key, value] in Object.entries(Item)) {
	console.log(`${key}의 맛은 ${value.taste}`)  // "아메리카노의 맛은 쓴 맛", "라떼의 맛은 고소한 맛", "말차라떼의 맛은 달콤한 맛" 
}

Object.entries(Item).map(drink => {
	return (
    	<div>
            <div>메뉴명: {drink[0]}</div>
            <div>맛: {drink[1].taste}</div>
        </div>)
    }
)

이를테면 요렇게 for문이나 map메서드로 원하는 값을 추출할 수 있겠다.

 

메서드 이용 방식이야 상황에 따라 또 코드를 짜는 개발자에 따라 무한히 다양해질 것이다.

위의 예제들은 즉석에서 본인이 생각해낸 것이므로 .. 아주 좋은 방법이라고 하긴 애매하지만, 원리를 터득하고 응용하는 것이 중요하겠다.

 

 

 

 

 

참조: https://ko.javascript.info/keys-values-entries