React 연습: Slot Machine

지금 듣고있는 Udemy강의에서 한번 scratch부터 만들어 보라고 해서 만들어 봤다.

개요

슬롯머신. 웹페이지를 새로고침하면 랜덤으로 과일이 출력됨. 3개가 동일하면 You Win!.

작동장면

소스코드

Machine Component

const randomSelector = () => {
    const fruits = ['🍇', '🍎', '🍒']

    return fruits[Math.floor(Math.random() * fruits.length)];
}

class Machine extends React.Component {
    render() {
        let fruitsSet = [randomSelector(), randomSelector(), randomSelector()];
        
        if (fruitsSet[0] === fruitsSet[1] && fruitsSet[0] === fruitsSet[2]) {
            return(
                <div>
                 <div>{fruitsSet}</div>
                 <h1>You Win!</h1>
                 <img src="https://media1.tenor.com/images/e73d11cafea91d2504db6790bca9645f/tenor.gif?itemid=11733200" alt=""/>
                </div>
            )
        } else {
            return (
                <div>
                    {fruitsSet}
                    <h1>You Lose!</h1>
                </div>
                
            )
        }
        
    }
}

App Component

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>Slot Machine</h1>
                <Machine />
            </div>
        )
    }
}

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

이렇게 하나하나 발전했으면 좋겠다.