Web_React #18

210826
Web_React #18

---

가위바위보 게임에 지난번 props개념을 사용해서 이미지를 띄워보자

-index.js

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

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

App.js를 import하여 render하도록 하였다.

-HandIcon.js

import img_rock from './assets/rock.svg'
import img_scissor from './assets/scissor.svg'
import img_paper from './assets/paper.svg'

const rspIcon = {
    rock : img_rock,
    scissor : img_scissor,
    paper : img_paper,
}
function HandIcon({value}) {
    const src = rspIcon[value]
    const alt = value
    return <img src={src} alt={alt} />
}

export default HandIcon

로컬에 있는 이미지 파일의 주소를 import하고 배열에 저장 후 HandIcon으로 보내진 parameter를 통해서 보여지는 이미지를 다르게 하였다.

-App.js

import HandIcon from './HandIcon';

function App(){
    return(
      <>
        <HandIcon value = 'rock'/>
        <HandIcon value = 'scissor'/>
        <HandIcon value = 'paper'/>
      </>
    )
}
 
export default App

HandIcon을 import하여 HandIcon의 value prop의 값을 전달하면서 출력되도록 한다.