[리액트] 계산기 만들기1

안녕하세요. 이제 막 기획자로 시작한 아기 기획자 소소한G 입니다.

비전공자 출신으로 IT 웹 기획자로서 살아남기위해 일주일에 두번 프로트엔드 개발 수업을 듣고 있어요.

오늘의 수업 주제는 리액트로 계산기 만들기랍니다. 

온전히 비전공자의 시선으로 꼼꼼하게, 원초적으로 설명드리려고 합니다.

저처럼 초보자 웰컴이에용

 

 

이전에 계산기 만드는 기초적인 방법에 대해 이야기해 보았죠? 

Eval 함수를 이용하여 만든 것 기억 하시나요? 

이번엔 이를 토대로 리액트에서 계산기를 만들어볼게요.

Eval 함수에 대해서는 아래 포스팅을 참고해주세요.

 

https://hjp-recipe.tistory.com/10?category=835412 

[eval 함수] 계산기 만들기

 

---

 

리액트로 계산기 만들기

 

1. git bash 에서 npx-create-react-app 으로 리액트 프로젝트를 생성합니다. 

 

2. src 폴더에 component폴더와 pages폴더를 만들고 pages폴더에 프로젝트 폴더를 생성한 뒤

폴더 속에 index.jsx, index.css 파일을 생성합니다. 

 

pages안의 계산기 페이지를 담을 폴더 이름을 Home으로 생성해보았습니다.

 

3. App.js 파일로 이동하여 설정해야할 것들이 있어요.

   - import React from 'react'

   - import './App.css'

   - import Home from './pages/Home'  → Home 폴더에서 Home 함수를 가져온다.

   - const App = () => {

         return <Home />

      }

   - export default App

     → Home함수 값을 내보내는 함수인 App 을 생성하여 App을 내보낸다. 

 

이렇게 설정한 App.js 안에 들어갈 항목들은 아래와 같습니다. 

App.js

 

4. Home 폴더안의 index.jsx에서 설정해야 할 것들이 있어요.

   - import React from 'react'

   - import './index.css'    → 계산기를 꾸며주기 위해 index.css파일을 불러온다.

 

 함수형 컴포넌트일 때는 상태를 사용하지 못하므로 상태를 추가하기 위해 class 컴포넌트로 변경합니다.

 class 컴포넌트는 아래와 같습니다. 

 그리고 이를 리액트 컴포넌트로 확장하기 위해 extends React.Component를 작성해줍니다.

 class 컴포넌트 실행안에는 상태를 관리하는 state 변수에 inputValue 를 주입합니다. 

class 컴포넌트

 

class 컴포넌트를 사용할 때는 html 코드를 반환하기 위해서 render()을 사용합니다.

아래와 같이 html 코드 반환값을 render 로 감싸줍니다. 

→ html코드 해석

값이 계산되는 display 영역은 input 태그를 사용하고 input-layer로 감싸주었습니다. 

** 리액트에서는 클래스명을 className을 사용하여 추가합니다. 

 

 

각 숫자의 버튼 태그에 onClick함수를 넣어 클릭이 되었을 때 value 값이 입력되도록 해줍니다.

이 때 함수의 결과값을 반환하는 것이 아니라 함수 자체를 전달해야하기 때문에 arrow function을 onClick에 줍니다. 

이는 실행되는 것이 아니라 함수 자체를 던지도록 하기 위한 것입니다. 

 

계산된 값을 표현하는 input 태그에는 value ={} 로 value 값에 데이터를 주입합니다. 

value={this.state.inputValue}

 

그리고 마지막으로 계산을 하기위해 eval 함수를 이용하여 계산식 함수를 작성합니다. 

 

지금까지 리액트로 계산기만들기였습니다.