7. 함수형 컴포넌트

요새는 기본을 함수형 컴포넌트로 쓴다고 함.

import React, { useState } from 'react'

function CounterFunc(props){

  const [number, setNumber] = useState(Number(props.number));

  const increase = ()=>{

    setNumber(number + 1);

  }

  const decrease = ()=>{

    setNumber(number - 1);

  }

  return(

    <>

      <h2>주문 수량은?</h2>

      <h3>수량 : {number}</h3>

      <button onClick={increase}>+1</button>

      <button onClick={decrease}>-1</button>

    </>

  )

}

function FuncComp(){

  return(

    <div className='func'>

      <CounterFunc number='100'>

      </CounterFunc>

    </div>

  )

}

export default FuncComp;

전 것의 함수형 컴포넌트 버전.

먼저, 저렇게 props로 넣어준 속성들 받아올 수 있고,

const [number, setNumber] = useState(기본값);

좀 특이해 보이긴 한데, 

일단 useState()는 Hook이라고 하는건데, 클래스형 컴포넌트에서만 쓸 수 있었던 것들을 모아놓은 라이브러리? 라고 보면 된다.

const [number, setNumber] = useState(0);

하면 state를 사용할 수 있게 되고, setState하던 걸 setNumber()로 사용할 수 있게 된다.

useState()에 인자로 들어가는 것은 기본값, 가장 처음의 값이 된다.

 

여튼 그냥 간단하게 

 

기존 number에다 1 더하도록 했다.

setNumber(값) 하면,

우리가 [number, setNumber] 하면서 짝꿍으로 지정해 줬으므로 number의 값이 바뀐다.

저 setNumber의 이름은 내 마음대로 쓸 수 있다

 

이거는 this 쓸 일 없으니, 음 아니 애초에 super()해서 state 등 초기화 해주는 역할을 Hook이 해주는 거니,

그냥 function 으로 정의해서 해도 됨.

근데 function 내부의 function이면 좀 이상한 느낌이긴 한데.. 

function은 계속 메모리에 상주하는 걸로 아는데.. 그래서 좀 성능문제가 있을수도 있는거려나?

그냥 리액트는 기본으로 익명함수 쓴다고 생각해도 나쁘지 않을 듯?

 

여튼 그렇게 버튼이랑 바인딩도 해 주고..

 

return(

     여기 안에 요소

)

 

참고로, onClick 저거 리액트꺼다. 그냥 저렇게 쉽게 하면 된다.

 

클래스는

render(){
	return(
    	요소
    )
}

 

함수는 그냥

return(
	요소
)