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를 넣고싶다면 반드시 중괄호를 감싸줘야한다.
코드를 수정하지 않아도 개발자 도구를 활용하여 값을 변경할 수도 있다.
Author And Source
이 문제에 관하여(Web_React #17), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kimhaech/WebReact-17저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)