이재호
클래스형 컴포넌트와 함수형 컴포넌트 본문
리액트에서 컴포넌트를 작성하는 방법에는 크게 2가지가 있다
클래스와 함수이다
클래스 문법은 자바스크립트와 비슷하다 여전히 클래스는 낯설고 어렵다
import React from 'react'
class App extends Componts {
render(){
return(
<div>
<h1>클래스형 컴포넌트 </h1>
</div>
)
}
}
함수형은 클래스보다 정말 보기 쉽고 간결하다
import React from 'react'
const app = () => {
return(
<div>
<h1>함수형 컴포넌트 </h1>
</div>
)
}
데이터의 상태를 관리할때 state(상태)를 사용하는데 클래스와 함수형에 그 차이가 있다
import React from 'react'
class App extends Componts {
constroctor(props){
super(props)
this.state = {
숫자 : 0
}
}
render(){
return(
<div>
<h1>{숫자}</h1>
<button onClick={()=>{
this.setState(숫자 : 숫자 + 1)}>클릭!</button>
</div>
)
}
}
constroctor를 사용하지 않고 state를 지정하는 방법
import React from 'react'
class App extends Componts {
state = {
숫자 : 0
}
render(){
const {숫자} = this.state
return(
<div>
<h1>{숫자}</h1>
<button onClick={()=>{
this.setState(prevenState => (
숫자 : prevenState.숫자 + 1
))}>클릭!</button>
</div>
)
}
}
함수형
import React from 'react'
const app = () => {
const {숫자, 숫자수정} = useState(0)
const chageHanlder = () => {
숫자수정(숫자 + 1)
}
return(
<div>
<h1 onClick=({chageHanlder}>{숫자}</h1>
</div>
)
}
리액트 개발팀은 함수형 컴포넌트 사용을 권장합니다. 왜냐면 버전업이 되면서 함수형 컴포넌트도 상태를 관리할수 있는 훅이라는게 탄생했고
코드가 일단 간결하기 떄문입니다.
'프론트엔드 > 리액트' 카테고리의 다른 글
ref란 (0) | 2023.03.18 |
---|---|
훅 패밀리 (0) | 2023.03.07 |
json-server ERR_CONNECTION_REFUSED 오류해결 (0) | 2022.12.05 |
리액트 ContextAPI란 (2) | 2022.12.02 |
리액트 라우터(React Router) 니 뭔데? (4) | 2022.11.29 |