Web_React #19

210826
Web_React #19

---

지난 가위바위보 게임에서 이미지를 보여지는 기능까지 구현했다.
이번에는 이미지가 그려진 버튼을 클릭하면 콘솔에 클릭한 버튼 rock,scissor,paper에 따라 값을 출력하도록 해보자.

HandButton.js 생성 및 App.js 수정

버튼을 클릭시 value를 전달하여 콘솔에 출력이 되어야 한다. 버튼마다 다른 value값을 전달하면 될 듯 하다.

-HandButton.js

import HandIcon from './HandIcon'


function HandButton({value, onClick}){
  const handleClick = () => onClick(value)
  return (
    <button onClick={handleClick}>
      <HandIcon value={value}/>
    </button>
  )
  
}

export default HandButton

-App.js

import HandButton from './HandButton';


function App(){
  const handleClick = (value) => console.log(value)
  return(
      <>
        <HandButton value = 'rock' onClick={handleClick}/>
        <HandButton value = 'scissor' onClick={handleClick} />
        <HandButton value = 'paper' onClick={handleClick} />
      </>
    )
}

export default App

value와 onClick 두개의 prop이 있다.
button태그 안에는 HandIcon이 있어서 HandButton으로 받은 value의 값으로 아이콘을 보여지게 한다.
onClick prop은 App의 handleClick함수에 해당한다. handleClick함수는 파라미터로 value를 받아서 콘솔에 출력한다.
HandButton에게 value와 onClick prop이 전달되는데 onClick은 App의 handleClick이다. handleClick = (value)=>console.log(value)이다.
그렇다면 클릭이 발생하면 HandButton의 handleClick이 실행되고 handleClick은 onClick prop에 value를 담아서 전달한다 이 onClick은 앞서 말했듯이 App의 handleClick 이다. 즉, value를 받아 출력하는 역할인 것이다.

버튼 클릭시 콘솔에 클릭한 버튼에 해당하는 value값이 출력되는 것을 확인.