[220420] 리액트로 구구단 만들기

자바스크립트로는 만들어봤지만 리액트로는 처음 만들어보는 구구단!

 

기초세팅

구구단을 만들 GuguClass.jsx

//GuguClass.jsx
import React, {Component} from 'react'

class GuguClass extends Component{
    render(){
        return(
            <>
                Hello World!
            </>
        )
    }
}

export default GuguClass

 

GuguClass.jsx를 가져와서 실행할 App.jsx

//GuguClass.jsx를 가져와서 실행할 App.jsx
import React, {Component} from 'react'
import GuguClass from './components/GuguClass'

class App extends Component{
    render(){
        return(
            <>
            	<GuguClass />
            </>
        )
    }
}

export default App;

 

---

만들 구구단 형태

---

만들어보기

1) 위에서 설계한대로라면 guguclass, guguform, gugulist. 총 3개의 컴포넌트가 필요하다.

2) guguform과 gugulist를 가져와서 guguclass에서 실행한다

3) 공통적으로 사용할 수 있는 변수 state 선언

//GuguClass
import React, {Component} from 'react'
import GuguForm from './GuguForm'
import GuguList from './GuguList'

class GuguClass extends Component{
     state = {
            value:null
        }
        
    render(){
        return(
            <>
                <GuguForm />
                <GuguList />
            </>
        )
    }
}

export default GuguClass

 

4) 숫자를 입력할 input과 계산을 시작할 submit버튼을 포함한 form을 만들기

//GuguForm
import React, {Component} from 'react'

class GuguForm extends Component{
    render(){
        return(
            <>
                <h2>몇단을 사용할거니?</h2>
                <form>
                    <input type="number" name="gugu" placeholder='숫자를 입력하세요' />
                    <input type="submit" value="조회"/>
                </form>
            </>
        )
    }
}

export default GuguForm

 

5) 계산결과를 작성하는 Gugulist 예시데이터 만들어서 화면에 나오나 확인

import React, {Component} from 'react'

class GuguList extends Component{
    render(){
        return(
            <>
                <ul>
                    <li>2단입니다</li>
                    <li>2*1=2</li>
                    <li>2*2=4</li>
                    <li>2*3=6</li>
                    <li>2*9=18</li>
                </ul>
            </>
        )
    }
}

export default GuguList

 

---

 

결과

//GuguList
import React, {Component} from 'react'
class GuguList extends Component{
    //조건부 렌더링
    list = (n) => {
    const arr = Array(9).fill(null)
    const result = arr.map((v,k)=>{
        return <li key={k}>{n}*{k+1}={n*(k+1)}</li>
    })
        return (
            <ul>
                <li>{n}단입니다</li>
                {result}
            </ul>
        )
    }

    render(){
        return(
            <>
                {this.props.value === null ? '몇단을 구해볼까?' : this.list(this.props.value)}
            </>
        )
    }
}

export default GuguList

//GuguForm
import React, {Component} from 'react'
class GuguForm extends Component{
    render(){
        return(
            <>
                <h2>몇단을 사용할거니?</h2>
                <form onSubmit={this.props.onSubmit}>
                    <input type="number" name="gugu" placeholder='숫자를 입력하세요' />
                    <input type="submit" value="조회"/>
                </form>
            </>
        )
    }
}

export default GuguForm

//GuguClass
import React, {Component} from 'react'
import GuguForm from './GuguForm'
import GuguList from './GuguList'

class GuguClass extends Component{
    state = {
        value:null,
    }

    handleSubmit = e => {
        e.preventDefault()
        this.setState({
            ...this.state,
            value:parseInt(e.target.gugu.value)
        })
    }

    render(){
        return(
            <>
                <GuguForm 
                    onSubmit={this.handleSubmit}
                />
                <GuguList 
                    value={this.state.value}
                />
            </>
        )
    }
}

export default GuguClass