이제서야 익숙해진 class component를 보내줘야 할 때....힝 🥲
React에서도 함수를 더 선호하기도 하고, 실제 현업에서도 함수를 더 사용하고 있기 때문에 '그렇다면 왜 고생해서 배웠담?'하고 야속할 수 있겠다.
히지만 지금 사용하지 않고 있다 하더라도 이전에 개발자들이 만들어놓은 코드에는 class형을 사용하고 있기 때문에 그 코드를 이해하고 혹은 유지보수를 위해서는 꼭 알아야 한다 💁🏼.
그렇다면 즐거운 마음으로 Functional component와 Hooks를 배워보자! yay!
Hooks란? 💁🏼
함수형 컴포넌트 안에서 state랑 ref를 쓸 수 있게 추가한 것 = > Hooks !
따라서 state와 setState 부분과 ref를 쓰는 부분이 다르다.
hook에서는 state를 객체로 묶지 않고 하나씩 쪼갰다고 생각하면 된다.
(setState는 use로 시작하는 부분이다.)
만약 return에 < div>에서 사용하고 싶다면
return <div>{first}{second}{value}{result} </div>를 써주면 된다.
참고로, component를 만들때 React.Component에서 React를 생략하고 import부분에 import React, {Component} from 'react'를 써주었던 것 처럼
useState앞에 있는 React 를 생략하기 위해선
import React, {useState} from 'react'를 써주면 된다!
import React ,{useState} from 'react'
function Moon() {
↓ 값 ↓ 함수
const [count, setCount] = useState(0)
}그렇다면 class형과 비교해보자!
class와 hooks를 한눈에 비교해보자!
(ref와 setState가 달라졌으니 두눈을 크게 뜨고 보자. ref는 노란색으로 setState는 빨간색으로 표시하였다.)
return부분도 살펴보자.
참고 ⭐️
js에서 사용되던 for나 class는 htmlFor과 className으로 사용해야 한다.
