[React]_Props

hanseungjune·2022년 6월 28일

목록 보기

7/10

✅ Props

html의 Attribute랑 똑같은 개념이라고 생각하면 됨

☑️ Component에 Props 사용하기

App.js

import Dice from './Dice';

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

export default App;

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;

import Dice from './Dice';

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

export default App;

☑️ Props를 배열을 통해서 가져오기?

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;

App.js

import Dice from './Dice';

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

export default App;

☑️ Props 디스트럭쳐링 문법 사용 시

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;

추가로 컴포넌트 브라우저 화면에서 color 나 num 을 수정해도 결과값이 변경되니까 테스트용으로 참고하면 될 것 같다.

✅ 가위바위보 프로젝트 진행 4

index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>가위바위보</title>
    <style>
      body {
        background-color: #40089a;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

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 = IMAGES[value];
  return <img src={src} alt={value} />;
}

export default HandIcon;