[React] 정해진 배열 안에서 랜덤으로 Index 뽑기

[상황설명]

Udemy에서 리액트와 관련해 강의를 듣고 있는데 defaultProps으로 포켓몬 8마리를 배열 안에 넣고,

플레이어가 2명이 있다는 가정 하에 랜덤으로 4마리를 뽑아 각각의 경험치를 더해서 승자와 패자를 나누는 걸 코드로 작성한다.

class Pokegame extends React.Component {
  static defaultProps = {
    pokemons: [
      { id: 4, name: 'Charmander', type: 'fire', base_experience: 62 },
      { id: 7, name: 'Squirtle', type: 'water', base_experience: 63 },
      { id: 11, name: 'Metapod', type: 'bug', base_experience: 72 },
      { id: 12, name: 'Butterfree', type: 'flying', base_experience: 178 },
      { id: 25, name: 'Pikachu', type: 'electric', base_experience: 112 },
      { id: 39, name: 'Jigglypuff', type: 'normal', base_experience: 95 },
      { id: 94, name: 'Gengar', type: 'poison', base_experience: 225 },
      { id: 133, name: 'Eevee', type: 'normal', base_experience: 65 },
    ],
  };
  
  render() {
  
  }
 }

 

 

강사분이 예시로 제시해준 코드는,

while을 써서 플레이어 한 명에게는 빈 Arr를 주고 나머지 한 명에게는 새로운 전체 배열을 줘서 두 플레이어의 배열이 같아질 때까지 loop를 멈추지 않고 돌리는데, Index를 랜덤으로 뽑고 splice 한 다음 push로 배열을 똑같게 만드는 코드였다.

let player1 = [];
let player2 = [...this.props.pokemons];

while (player1.length < player2.length) {
  let randomIdx = Math.floor(Math.random() * player2.length);
  let randomPokemon = player2.splice(randomIdx)[0];
  player1.push(randomPokemon);
};

 

 

 

근데 나는, 'while로 loop를 하지 않고 코드를 쓸 수 없을까' 라는 생각을 했고 구글링으로 랜덤으로 인덱스 뽑기를 쳐봤는데 거기서 얻은 아이디어 shuffle. 

포켓몬 배열 자체를 섞은 다음에 앞에 4개를 뽑고, 뽑고 남은 나머지를 부여하면 어떨까 라는 생각을 했다.

    const pokemons = [...this.props.pokemons];
    const pickFour = pokemons.sort(() => Math.random() - 0.5).splice(4);
    const pickOthers = [...pokemons];

Math.random() - 0.5의 계산 결과가 양수 혹은 음수로 무작위로 반환되기 때문에 함수 sort()가 무작위로 재정렬해준다. 찾은 곳에서는 모든 배열이 확률적으로 거의 같게 나오도록 해야한다는 문제였는데, 나는 랜덤으로만 배열을 얻는 걸 원했기 때문에 코드를 저렇게 썼다.  '어떻게 하면 랜덤으로 4개를 뽑을 수 있을까'만 생각을 했는데, 배열을 뒤죽박죽 만들어서 하면 되겠구나 깨달았다. 

 

역시 뭘 하든 문제를 두고 한 가지의 방법에만 몰두하는 것이 아닌 발상의 전환이 필요해-!

 

 

 

---

[참고]

Udemy / The Modern React Bootcamp 섹션5. Pokedex Project

모던 JavaScript 튜토리얼 배열 무작위로 섞기