2021.06.17(Thu.) <리액트 배열 3대장 메소드>

1. map

• 객체의 키와 값을 모두 다른 조작 이후에 새로운 배열로 각각 반환하는 메서드.
• 리액트에서는 주로 컴포넌트에서 데이터를 받아와 각각의 요소를 반환하는 방식으로 사용된다.

const friends = ["James", "Akbak", "Mark", "Jully"]
const smilingFriends = friends.map(friends => {return friends + "^^"}); //  ["James^^", "Akbak^^", "Mark^^", "Jully^^"]

• 물론 저렇게 전부 수정할 수 도 있으며, 객체 안에 있는 키를 받아 반환할 수도 있다.

const friends = [
  {name: "James", age: 25, onShift: true}, 
  {name: "Akbak", age: 30, onShift: true},
  {name: "Mark", age: 30, onShift: false},
  {name: "Jully", age: 26, onShift: false}
]

const friendsAge = friends.map(tooYoung => {return tooYoung.age});
console.log(friendsAge) // [25, 30, 30, 26]

• 그럼 만약 콜백 함수 자체를 찍으면 무엇이 나올까?
  • 아무것도 안 나온다. 이미 map을 사용한 함수 안에서 써 버리고 함수를 나온 뒤에는 다시 찾을 수 없다.
• 웬만하면 콜백 함수의 인자를 우리가 사용할 데이터의 이름 자체를 써 버리면 한 줄로 써도 쉽게 찾을 수 있다.
  예시 1번처럼 말이다. 2번의 경우 tooYoung이라는
  이름으로 무슨 인자를 받는지 알 수 없는 무의미한 말이다.

2. filter

• 객체 안에서 원하는 값을 가져와 배열로 반환하는 메서드.
• map이랑 헷갈릴 수 있지만 우리가 생각하는 filter을 생각하면 된다. 조건에 맞는 값만 걸러주기
  때문이다.
• 또 map과 큰 차이는 map은 다시 데이터를 원하는 데이터만 뽑아서 배열로 반환한다는 것이다. filter는 조건에 맞는 "객체"를 가져온다.

const friends = [
  {name: "James", age: 25, onShift: true}, 
  {name: "Akbak", age: 30, onShift: true},
  {name: "Mark", age: 30, onShift: false},
  {name: "Jully", age: 26, onShift: false}
]
// 오늘 근무은 친구들을 알고싶다.
const todayWork = friends.filter((friends) => {return friends.onShift === true});
console.log(todayWork);
// {name: "James", age: 25, onShift: true},  {name: "Akbak", age: 30, onShift: true}

3. reduce

• 배열에 있는 모든 값을 누적시켜서 반환한다.
• 그래서 이전 값과 지금의 값을 둘 다 인자로 콜백 함수가 받는다.

const friends = [
  {name: "James", age: 25, onShift: true}, 
  {name: "Akbak", age: 30, onShift: true},
  {name: "Mark", age: 30, onShift: false},
  {name: "Jully", age: 26, onShift: false}
]

// 친구들 나이의 평균 값은?
const averageAge = friends.reduce((acc, cur) => {return acc + cur.age}, 0);
console.log(averageAge / friends.length); // 27.75

• 콜백 함수에서 return 된 값은 acc가 되고, 다음 올 값은 cur 이 된다. 결국 순차적으로 리턴되는 값은 acc가 될 것이다.
• 마지막에는 초기값을 정해줄 수 있다. 위의 예시에서는 초기값을 0부터 시작했다. 다 더해서 평균을 구해야 하기
  때문이다. 아무것도 넣지 않으면 cur 값이 초기값이 된다. 그러므로, 위의 예시에서는 초기값을 안 정해줘도 문제가 없지만, 정해주는 것이 side effect를 줄일 수 있을 것이다.

4. 그 외의 배열의 유용한 메서드

 

1. join

• 배열의 데이터를 합쳐서 하나의 스트링으로 만들어 버린다.
• 각각의 데이터 사이에 구분자도 넣어서 구분해 하나의 스트링으로 만들어 줄 수도 있다.

2. split

• 스트링을 합쳐서 하나의 배열로 만들어 버린다.
• 각각의 데이터 사이에 구분자도 넣어서 구분해 하나의 배열로 만들어 줄 수도 있다.
• limit 값을 입력해 주면 원하는 index까지의 데이터를 얻을 수 있다.

const friends = ["James", "Akbak", "Mark", "Jully"]
const result = frinends.split(",", 2) // 이때, 숫자 2가 limit
console.log(result) // ["James", "Akbak"]

3. splice

• 배열에서 원하는 데이터를 삭제한다.

const friends = ["James", "Akbak", "Mark", "Jully"]
const result = frinends.splice(0, 2) // idex 0 부터 2개의 아이템을 삭제하겠다.
console.log(result) // ["Mark", "Jully"]
console.log(friends) // ["James", "Akbak", "Mark", "Jully"]

4. slice

• 배열에서 원하는 아이템 만을 잘라서 보여준다.

  const friends = ["James", "Akbak", "Mark", "Jully"] frinends.slice(0, 2) // idex 0 부터 2개의 아이템 만 보여달라. => ["James", "Akbak"] 
  console.log(friends) // ["James", "Akbak", "Mark", "Jully"]`

• 위의 예시처럼, slice는 아무리 해도 '보여' 줄 뿐이다. 진짜 배열을 수정하지 않는다. (immutable)
• 물론 splice로 나눠버리면 진짜 배열도 잘린다. (mutable)

5. find

• 배열 안에서 조건에 맞는 아이템을 찾아 보여준다. 조건에 맞는 경우를 찾은 후에 함수는 종료된다.
• 콜백 함수로 전달 하자.

6. some

• 배열에서 하나라도 조건에 맞는 요소가 있으면 true를 반환한다.
• every는 전부 다 맞아야 true를 반환한다.

7. sort

• 콜백 함수를 전달받아서 인자로 이전 값과 현재 값을 받아, 마이너스를 리턴하게 되면 현재 값이 더 작다고 생각하고 정렬한다.
• 간단하게 말하면 작은 거부터 큰 순으로 정렬해 준다.

const friends = [
  {name: "James", age: 25, onShift: true}, 
  {name: "Akbak", age: 30, onShift: true},
  {name: "Mark", age: 30, onShift: false},
  {name: "Jully", age: 26, onShift: false}
]
// 인생 짬순으로 정렬!
const sortAge = friends.map((friends) => friends.age)
    .sort((a, b) => a - b)
console.log(sortAge) // [25, 26, 30, 30]

이전에 정리했던 것들을 한번 더 정리했다.
훨씬 찾고 보기 편하다.
외우지 않더라도 어떤 상황에 사용할지를 생각하자.
사용방법은 찾아보면 나온다.
계속 리액트 팬다. 진짜 씨게 팬다. 사실 그러려고 메서드 공부했다.