Web_React #17

210826
Web_React #17

---

-App.js

import Dice from './Dice';

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

export default App;

html태그 외에 이와 같은 Dice 컴포넌트에도 속성을 부여할 수 있다.
React Component에서 적용했기 때문에 React 개발자 도구, Component탭에확인하면 정상적으로 적용된 것을 확인할 수 있다.

React에서는 이처럼 Component에 지정한 속성을 props라고 부른다.

Component에 지정한 속성은 하나의 객체형태로 Component함수의 첫번째 parameter로 전달된다.

-Dice.js

import diceBlue01 from './assets/dice-blue-1.svg';

function Dice(props) {
  console.log(props)
  return <img src={diceBlue01} alt="주사위" />;
}

export default Dice;

이 props를 이용해보자
-Dice.js

import diceBlue01 from './assets/dice-blue-1.svg';
import diceRed01 from './assets/dice-red-1.svg';

function Dice(props) {
  const diceImg = props.color === 'red' ? diceRed01 : diceBlue01
  return <img src={diceImg} alt="주사위" />;
}

export default Dice;

Dice의 color에 따라 이미지의 주소가 변경된다.

import Dice from './Dice';

function App() {
    return (
      <div>
        <Dice color="red" />
      </div>
    )
}

export default App;

color값을 red로 변경
->

이처럼 prop값에 따라 render되는 값을 바꿀 수 있다.

-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(props) {
  const src = DICE_IMAGES[props.color][props.num - 1]
  const alt = `${props.color} ${props.num}`
  return <img src={src} alt={alt} />;
}

export default Dice;

반복되는 props 정리

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;

-App.js

import Dice from './Dice';

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

export default App;

props를 추가할 때 숫자 2를 넣고싶다면 반드시 중괄호를 감싸줘야한다.

코드를 수정하지 않아도 개발자 도구를 활용하여 값을 변경할 수도 있다.