[React] Props 2차 배열 활용하기

[React] Props 2차 배열 활용하기

안녕하세요 오늘은 2차 배열을 활용하기 관점에서 이야기를 해보도록 하겠습니다.
아래 예시는 React에서 Props 처리하는 예시입니다.

App.js 파일에서 Dice라는 컴포넌트에서 Props속성들을 주고 있고,
Dice.js 파일에서 그 Props속성들을 받아오고 있습니다. 

//App.js

import Dice  from "./Dice";

function App() {
    return (
        <div>
           <Dice color="blue" num={4} />
        </div>
    )
}

export default App;

👉 2차 배열 활용하기

근데 Dice.js파일에서 각각 이미지들을 import 해와서 객체와 배열을 활용해서 'DICE_IMAGES'라는 변수에 정리를 했습니다.
자 이렇게 정리를 해두면 Props를 활용해서 함수 내부에서도 src라는 변수처럼 편리하게(2차 배열) 사용할 수 있습니다.
(함수 파라미터 디스트럭처링 문법 활용)

// Dice.js

import diceBlue01 from './assets/dice-blue-1.svg';
import diceBlue02 from './assets/dice-blue-2.svg';
import diceBlue03 from './assets/dice-blue-3.svg';
import diceBlue04 from './assets/dice-blue-4.svg';
import diceBlue05 from './assets/dice-blue-5.svg';
import diceBlue06 from './assets/dice-blue-6.svg';
import diceRed01 from './assets/dice-red-1.svg';
import diceRed02 from './assets/dice-red-2.svg';
import diceRed03 from './assets/dice-red-3.svg';
import diceRed04 from './assets/dice-red-4.svg';
import diceRed05 from './assets/dice-red-5.svg';
import diceRed06 from './assets/dice-red-6.svg';

const DICE_IMAGES = {
    blue: [diceBlue01, diceBlue02, diceBlue03, diceBlue04, diceBlue05, diceBlue06],
    red: [diceRed01, diceRed02, diceRed03, diceRed04, diceRed05, diceRed06]
};

function Dice({color = 'blue', num = 1}) { // 디스트럭처링문법 활용
    const src = DICE_IMAGES[color][num - 1];
    const alt = `${color} ${num}`
    return <img src={src} alt={alt} />
};

export default Dice;

👉 또 다른 예시 

이번에는 HandIcon.js 파일에서 객체를 활용해서 'IMAGES'라는 변수에 정리를 했습니다.
이렇게 정리해둔 것을 Props를 활용해서 함수 내부에서도 src라는 변수처럼 편리하게 사용할 수 있게 됩니다.

// App.js

import HandIcon from './HandIcon';

function App() {
  return (
    <div>
      <HandIcon value="rock" />
      <HandIcon value="scissor" />
      <HandIcon value="paper" />
    </div>
  );
}

export default App;

// HandIcon.js

import rockImg from './assets/rock.svg';
import scissorImg from './assets/scissor.svg';
import paperImg from './assets/paper.svg';

const IMAGES = {
  'rock': rockImg,
  'scissor' : scissorImg,
  'paper' : paperImg
}

function HandIcon({value}) {
  const src = imgs[value]
  return <img src={src} alt="rock" />;
}

export default HandIcon;