string 데이터 배열로 만들기

공통 컴포넌트에서 출력되는 형식에 맞게 데이터를 가공후에 props를 통해 데이터를 내려보내려고 한다.

 

- 서버에서 받아오는 데이터 형식

"testDescription": "-테스트 리스트 입니다 1번째.-테스트 리스트 입니다 2번째.-테스트 리스트 입니다 3번째.",

 

- 만들어져야 하는 형식

newList: [

{

"conText": "-테스트 리스트 입니다 1번째."

},

{

"conText": "-테스트 리스트 입니다 2번째."

},

{

"conText": "-테스트 리스트 입니다 3번째."

},

]

 

 

처음 시도했던 방식

'-' 기호를 가지고 하나의 문자열로 오는 데이터를 리스트로 나눈 후 conText의 이름에 데이터를 넣은 객체 모습으로 리턴시켰다. 

그리고 나서 빈 문자열이 있을 경우는 지워주는 모습으로 배열을 만들었는데 잘 출력되는 것을 확인할 수 있었다. 

const newList = this.testDescription

.split('-')

.map((item) => {

return {

conText: item,

}

})

.filter((item) => item.content !== '')

this.testDescription = newList

 

또는

const newArr = []

this.testDescription.split('-').forEach((element) => {

if (element.content == '') return

else {

 newArr.push({conText: element})

 }

})

 

 

---

 

 

조금 더 나은 방식이 없을까해서 나의 멘토님께 조언을 구해봤다. 

.split('-')

.map((item) => {

return {

conText: item,

}

})

.filter((item) => item.conText !== '')

this.testDescription = newList

 

▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽

const newList = this.testDescription

.split('-')

.filter((item) => item)

.map((item) => ({conText: item}))

1. 리턴문을 줄여볼 것

2. 화살표 함수문이기에 객체인지 인지시켜 주기위해서 소괄호를 다시 한번 감쌌다. 

3. map으로 전체를 다 돌고 나서 filter를 시켜주는게 아닌, 먼저 filter시킨 후 돌리는 횟수를 줄이는 것

4. filter 또한 true만 리턴시키기 때문에 줄일 수 있다. 

 

 

만일 여기서 reduce를 사용한다면?

▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽

const newArr = this.testDescription

.split('-')

.reduce((originList, item) => {

if (item?.content) {

originList.push({conText: item,})

}

return originList

}, [])

 

reduce는 누적되는 값을 사용하기에 유용하다. 

reduce의 형태를 보면 맨 마지막에 빈 배열의 모습은 initialValue의 형태로, 최초 호출에서 제공하는 값이다. 

내가 사용한 것처럼 빈 배열일 경우에는 처음 인수에 제공하는 값이 return 되고 > 그 이후로는 만들어진 originList안에 누적되게 되는 형식이다. 

 

리듀스가 뭔가 첨엔 다가가기 어려운데 잘 사용하면 메소드 체이닝 안해도 하나로 뿌실 수 있는 좋은 무기같다. 

아주 꿀 팁을 알게됐다!!!