#7 곱셈 프로그램 만들기

react를 이용해, 숫자를 입력하면 그 숫자의 x9 한 값까지 출력하는 n단 계산 프로그램을 만들어보자.

 

우선 컴포넌트의 구성부터 생각을 해보자.

 

계산기 전체를 담을 컴포넌트 이름을 Multiple이라고 하면

 

이 Multiple은 숫자를 입력하고 submit할 input 부분, 결과를 출력해줄 list 부분

 

이렇게 두 개의 컴포넌트로 나눌 수 있다.

 

우선 가장 상위 컴포넌트가 될 Multiple 컴포넌트를 작성하자.

 

개발 환경은 #5~#6에서 사용한 것과 동일하다.

 

 

src 폴더 안에 copmonent 폴더를 만들고, 그 안에 multi 폴더를 만든 후, 그 안에 Multiple.jsx 파일을 생성한다.

 

/*  practice/src/component/multi/multiple.jsx  */

import React from 'react'

class Multiple extends React.Component {   
   render() {
      return(
         <>
            Hello, Multiplier!!
         </>
      )
   }
}

export default Multiple

 

이 Multiple 컴포넌트를 export하고, App 컴포넌트에서 받을 것이다.

 

App.jsx에서 import하고 App 컴포넌트의 render 함수 안에서 <Multiple/> 컴포넌트를 사용한다.

 

/*  practice/src/App.jsx  */
import React from 'react'

import Multiple from './component/multi/Multiple.jsx'

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

 

hello, Muitiplier 문구가 렌더링된다면  export/import가 문제없이 진행된 것이다.

 

이제 Multiple 컴포넌트 안에 아까 언급한 숫자를 입력하고 submit할 input을 가진 컴포넌트 (이하 MultipleForm),

 

결과를 리스트 형태로 출력할 ul을 가진 컴포넌트 (이하 MultipleList) 둘로 쪼깨고 각각의 코드를 작성해볼 것이다.

 

1. Child 컴포넌트 작성

각각의 두 개 child component를 다음과 같이 작성한다.

/*  practice/src/component/multi/MultipleForm  */

import React from 'react'

class MultipleForm extends React.Component {
   render() {
      return(
         <>
            <h2> 곱셈 결과를 출력할 숫자 입력 </h2>
            <form>
               <input type='number' name='multiple' placeholder='input number'/>
               <input type='submit' value='calculate'/>
            </form>
         </>
      )
   }
}

export default MultipleForm

/*  practice/src/component/multi/MultipleList  */

import React from 'react'

class MultipleList extends React.Component {
   render() {
      return(
         <>
            결과가 여기 출력 될 예정..
         </>
      )
   }
}

export default MultipleList

 

이 export된 2개 child 컴포넌트들을 Multiple.jsx의 Multiple 컴포넌트에서 받는다.

 

/*  practice/src/component/multi/Multiple.jsx  */

import React from 'react'

import MultipleFrom from './MultipleForm.jsx'
import MultipleList from './MultipleList.jsx'

class Multiple extneds React.Component {
   render() {
      return (
         <>
            <MultipleForm/>
            <MultipleList/>
         </>
      )
   }
}

export default Multiple

 

 1. 이제 우리 input에 (MultipleForm) 에 숫자를 넣고 submit을 하면

 

2. 숫자의 값을 Multiple 컴포넌트를 거쳐 MultipleList에 전달된다.

 

4. MultipleList는 전달받은 value를 가지고 계산을 거쳐 결과를 출력해준다.

 

하나씩 천천히 해보자..

 

1.1 MultipleForm > Multiple > MultipleList로 input value 전달

MultipleForm 컴포넌트에 함수를 넣어도 가능은 하지만 이런 경우 parent 컴포넌트에 함수를 넣고,

 

그걸 props로 전달해주는 것이 코드의 유지, 보수 측면에서 편하다.

 

따라서 Multiple 컴포넌트에서 함수를 작성한 후, 이를 MultipleForm으로 전달하자.

 

컴포넌트를 다음에 같이 state, handleSubmit 함수를 추가한다.

 

/*  practice/src/component/multi/Multiple.jsx  */

class Multiple extends React.Component {
   state = {
      value:null
   }
   
   handleSubmit = (e) => {
      e.preventDefault()
      
      this.setState({
         ...this.state,
         value:parseInt(e.target.multiple.value) // e.target의 name의 value
         // multiple은 input element의 name값인 multiple을 의미한다.
      })
      
      console.log(this.state.value)  // 함수가 잘 싱행되는지 확인용
   }
   
   render() {
      return(
         <>
            <MultipleForm
               onSubmit={this.handleSubmit}
            />
            <MultipleList/>
         </>
      )
   }
}

 

이제 전달한 함수를 MultipleForm 컴포넌트의 form element에서 받아주면 된다.

 

/*  practice/src/component/multi/ultipleForm.jsx  */

class MultipleForm extends React.Component {
   render() {
      return(
         <>
            <h2> 숫자 입력 </h2>
            <form onSubmit = { this.props.onSubmit }>
               <input type='number' name='multiple' placeholder='숫자 입력'>
               <input type='submit' value='calculate!'>
            <form/>
         </>
      )
   }
}

아무 숫자나 입력하고 submit을 한 후, 콘솔에 value가 잘 출력되는지 확인해보자.

 

숫자가 바뀌는게 한 타이밍 늦는데, 이는 state가 바뀌는 시점이 submit을 한 번 한 후, 다시 한 번해야

 

state가 바뀐 것을 브라우저가 인식할 수 있기 때문이다.

 

함수가 잘 전달되어 작동하는게 확인되었으면 console.log는 함수에서 제거한다.

 

submit을 하면 이제 handleSubmit 함수에 의해 내가 넣은 숫자의 값이 Multiple 컴포넌트에 전달된다.

 

이제 이 전달받은 숫자값을 MultipleList에 전달해준다.

 

/*  practice/src/component/multi/Multiple.jsx  */

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

 

MultipleList 컴포넌트의 render 함수에 {this.props.value}를 넣어서 잘 출력이 되는지 확인한다.

 

/*  practice/src/component/multi/MultipleList.jsx  */

render() {
   return(
      <>
         {this.props.value}
      </>
   )
}

 

이제 MultipleList에선 받은 value를 가지고 x1 ~ x9 까지 계산한 값을 출력해야 하는데,

 

우선 9개의 null값을 가진 배열을 하나 만들고, 그 배열에 x1 ~ x9까지 계산한 값을 채워 넣은 후,

 

그 배열을 렌더링해주면 된다.

 

list라는 함수를 선언한다.

 

/*  practice/src/component/multi/MultipleList.jsx  */

import React from 'react'

class MultipleList extends React.Component {
   list = (n) => {
      let 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 MultipleList

 

이렇게 한 후, 숫자를 넣고 submit하면 입력 숫자의 x1 ~ x9 까지 계산한 값을 출력해주는 것을 확인할 수 있다.