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

오늘은 2020년 12월 26일 토요일🎶

 

어제는 class component만 썼다.

gun-bro.tistory.com/8

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

---

 

class component만 쓰다보니 function component를 까먹었나 싶었지만,

생각 의외로 잘 했다. 근데, map()함수를 제대로 못써서 오류가 좀 많았다.

 

map()함수를 써서 배열에 분배하는 방식으로 쓰고 싶었다.

처음에 코드를 작성할 때 class compoent return 값으로 See라는 function component를 만들었다.

그리고 나서 See 함수에서 map함수를 쓰는데 하나 하나 분배가 안되는 것이였다.

 

알고 보니 내가 하고 싶은 방식은 class component retrun 값으로 See 컴포넌트를 넣는게 아니라

그 전에 map()함수를 써서 그 안에 See 컴포넌트를 넣어서 See 컴포넌트 내부에서 

배열마다 있는 값들을 보여주는 것이였다.

 

최종적으로 다 만든 코드는 아래에 있다.

import React from "react";
import PropTypes from "prop-types";

const people = [
  {
    id:1,
    age: '어른',
    number:0,
    seeingAnimal:'호랑이'
  },
  { 
    id:2,
    age: '아이',
    number:0,
    seeingAnimal:'여우'
  }
];

function See({age, number, seeingAnimal}){
  return(
    <div>
      {age} {number}명은 지금 {seeingAnimal}를 보고 있습니다.
    </div>
  );
}

See.propTypes = {
  age: PropTypes.string.isRequired,
  number: PropTypes.number.isRequired,
  seeingAnimal: PropTypes.string.isRequired
}

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;
    people[0].number=Number(adults);
    const adultsSum = adults * 5000;
    const children = document.getElementById('children-number').value;
    people[1].number=Number(children);
    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>
      }
      {isCalculating? <div>
        <h2>현재 무슨 동물을 보고 있나요?</h2>
        {people.map((man)=>(
          <See key={man.id}
          age = {man.age}
          number = {man.number} 
          seeingAnimal = {man.seeingAnimal}/>
        ))}
      </div>:""
      }
    </div>
   );
  }
}

export default App;

 

뭐 만들다보니 class component의 return 값이 주렁주렁 생겼다.

뭔가 정말 비효율적으로 한 것 같지만, 계속 공부하다보면, 

주렁주렁이 아닌 정리가 잘된 return 값을 보낼 수 있을 것이다.

 

 

props, propTypes, map(), state, component 생명주기 모두를 이용한 결과 영상

 

이거 만드느라 한 5시간정도 소요한 것 같다.

오래 걸리긴 했지만, 덕분에 제가 어디에 문제가 있는지 알게 됐다.

나의 문제를 정리 해보겠다.

 

1. JSX문법 이해도가 부족하다.

 

이거는 내가 react 코드를 많이 쳐야 나아질 것 같다.

 

//잘못된 예시 return 다음에 소괄호로 묶을 것
function See({age, number, seeingAnimal}){
  return
    <div>
      {age} {number}명은 지금 {seeingAnimal}를 보고 있습니다.
    </div>
  ;
}

//잘한 예시
function See({age, number, seeingAnimal}){
  return(
    <div>
      {age} {number}명은 지금 {seeingAnimal}를 보고 있습니다.
    </div>
  );
}

 

 

이 코드는 function component인데, return 값으로

<div></div>를 보낸다. 소괄호를 사용해서 태그를 묶어서 사용하는 것 같다.

대신, return 값으로는 형제 태그가 못 오고, 부모 태그를 이용해서 자손태그를

여러 개로 둘 수 있는 것 같다.

 

그리고 태그가 안에서만 중괄호를 써서 변수,

삼항 연산자,  함수 정도는 쓸 수 있는 것 같다.

 

map()함수 안에 component를 넣을 때 무조건

 

//잘못된 예시 See component 태그를 소괄호로 묶어서 사용하자 
{
	people.map((man)=>{
    	<See key={man.id}
        age = {man.age}
        number = {man.number} 
        seeingAnimal = {man.seeingAnimal}/>
	})
}
//잘한 예시
{
	people.map((man)=>(
    	<See key={man.id}
        age = {man.age}
        number = {man.number} 
        seeingAnimal = {man.seeingAnimal}/>
	))
}
//ES5 문법 잘한 예시
{
	people.map(function(man){
    	return(
    		<See key={man.id}
        	age = {man.age}
        	number = {man.number} 
        	seeingAnimal = {man.seeingAnimal}/>
		)
    })
}

 

소괄호를 쓰고 컴포넌트 태그를 집어 넣어야한다.

 

소괄호를 안쓰고 그냥 일반 arrow function을 썼는데, 작동이 되지 않았다.

 

아 그리고 JSX 문법은 component들만 사용가능하다.

혹시나 해서 전역 함수를 만들고 JSX문법을 써서 해봤는데,

return 값으로 html태그들이 못간다.

 

알아둬야겠다.

 

 

2. class에 대한 지식이 부족하다.

 

class가 뭔지만 알았는데, super나 생성자 함수를 쓰는 방법을 잘 모르겠다...

 

super를 어떻게 써야하고, 생성자 함수를 어떻게 활용할 지 알아야겠다.

이러한 것들은 자바스크립트 카테고리에 업데이트 시키면서 공부해야지.