리액트 - Props

컴포넌트의 속성=props, prop을 지정하는 방법 (프로퍼티스~)

 

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

개발자도구 - 리액트 컴포넌트 탭에서 prop을 확인할 수 있다

 

 

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

컴포넌트 태그에 지정한 속성은 하나의 객체 형태로 컴포넌트 함수의 첫번째 파라미터로 전달된다.

콘솔에 출력해보면 객체가 출력된다.

//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="주사위"/>;
}

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

Dice 컴포넌트에서 prop에 따라 다른 이미지 소스를 다르게 불러오도록 만들어주고 

Dice 태그에서 prop을 red로 바꿔주면 아래와 같이렌더 되는 모습이 달라짐

---

전체 이미지를 각각 import 해오고 color, num prop을 통해 렌더되는 이미지를 달리할수있다. 

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}/>;
}

props 가 반복해서 나온다 

↓ Destructing 문법을 사용해서 코드를 간결하게 만들 수 있다.  & 기본값 지정 가능 

function Dice({ color = "blue", num = "1" }){
    const src = DICE_IMAGES[color][num-1];
    const alt = `${color} ${num}`;
    return <img src={src} alt={alt}/>;
}

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