React class component와 function component 공부 일기 #1

안녕하세요!! 😊

오늘 처음으로 개발 일기 써보네요ㅋㅋㅋㅋㅋ

원래 이 카테고리를 만들 때 개발 일기가 아닌 그냥 일기 카테고리를 만들려고 했어요.

 

근데 그냥 일기면 제가 이 블로그를 만든 이유가 없어질 수 있다고 생각했어요.

그래서 내가 배운 걸 가지고 만들어보면서 힘들었던 고충들을 쓰려고 해요.

 

---

오늘은 2020년 12월 25일 크리스마스🎄

 

낮에 엄마와 함께 장보고 난 후 오목을 뒀다.

난 항상 내 방에서 컴퓨터를 하거나 휴대폰만 봐 왔는데,

오늘은 좀 더 평화로웠어.

왜일까? 

 

나도 모른다.

단지, 부모님과 함께 오늘 하루를 보내고, 

평소와 같이 내 방에서 컴퓨터를 하고, 휴대폰은 자주 안 봤다.

 

부모님과 같이 있으면 평화로운 것 같아.

다들 그렇지 않나?

 

오늘의 나의 할 일은 이렇게 부모님과 보내고,

내가 지금까지 배웠던 React를 활용하는 거였어.

근데 오늘 React를 활용할 시간이 부족했 던 것 같아.

 

그래서 지금 하려해.

 

 

오늘 만들어 볼 것은 음... 동물원 입장료 계산하는 코드를 작성해보려고.

 

지금 쓰는 코드는 내가 기억하는 걸 가지고 작성해보는 거야.

이렇게 해보는 건 새로운 도전이라 생각해.

 

import React from "react";

class App extends React.Component{
  state = {
    peopleNumber: 0,
    allMoney:0,
    isLoading:true,
    isCalculating:false
  }
  componentDidMount(){
    setTimeout(()=>{
      this.setState({isLoading:false});
    },4000);
  }
  calculate=()=>{
    const adults = document.getElementById('adults-number').value;
    const adultsSum = adults * 5000;
    const children = document.getElementById('children-number').value;
    const childrenSum = children * 3000;
    this.setState(()=>({
      isCalculating:true,
      allMoney:adultsSum+childrenSum
    }));
  }
  render(){
   const {isLoading, allMoney, isCalculating} = this.state;
   return (
    <div>
      {isLoading ? "Loading...":
      <form>
        <fieldset>
          <legend>정보를 입력하세요</legend>
          <h2>아이는 3000원, 어른은 5000원 입니다.</h2>
          <label>아이 몇 명, 어른 몇 명에서 오셨나요? :</label>
          <input type="text" id="adults-number" placeholder="어른 수"/>
          <input type="text" id="children-number" placeholder="어린이 수"/>
          <br/><input type="button" value="제출하기" onClick={this.calculate}/>
        </fieldset>
        {isCalculating? <fieldset>
          <legend>계산 결과</legend>
          <h3>{allMoney}원 입니다.</h3>
        </fieldset>:<h2>계산을 해주셔야 결과가 나와요.</h2> 
        }
      </form>
      }
    </div>
   ); 
  }
}

export default App;

 

이 코드 만들 때 처음에 오류가 있었어.

내가 calculate를 함수 설정을 잘 못 해서 오류 걸렸었어.

그거 말고는 정말 잘 돼!!😊😊😊😍

 

 

동물원 입장료 계산서

오예 잘된다. 

 

그러면 이번엔 map함수와 props를 써볼까!?

 

그거는 내일 해봐야지!!