리액트를 처음 하면서 가장 큰 난관에 들어선 점이 바로 함수형과 클래스형 컴포넌트의 차이점이다. 6개월이란 시간동안 리액트를 완벽하게 숙지한 것은 아니지만, 내내 살펴보면서 하나씩 알아갔지만 정작 가장 중요한 핵심인 리액트의 구조를 형성하는 이 두 가지의 차이점에 대해선 의문이었다. 그러던 중, 함수형과 클래스형의 변수 선언을 통해서 해당 코드가 단순히 구성이냐 기능이냐의 차이가 아닌, 방식의 차이라는 점을 알 수 있었다.
1.선언
- 클래스형 : class 형식 / component 상속 / render() ~ return / state / LifeCycle
- 함수형 : function 형식 / 단순히 return / hook 사용 / 클래스형 보다 메모리 사용 少
이 둘의 차이점은 간략하게 설명하면, 선언 방식의 차이라는 것으로 알 수 있다. 즉, 결국 둘의 역할은 동일하다. (기존에는 둘의 역할이 다르게 사용되는 것이라고 판단했기 때문)
2. State
- 클래스형
import React from "react";
export default calss CartPage extends React.Component {
constructor(props) {
super(props);
this.state = {
cartList: [],
allChecked: true,
totalPayPrice : 0,
delivery_fee : 0,
}
}
}이들은 변수를 선언할 때, this.state 내에서 지정하는 형식을 사용한다. 물론 constructor은 없어도 state로 선언은 가능하다. 어울로 변수를 불러올 땐 this.state.cartList와 같은 방식으로 단순하고 빠르게 불러올 수 있어서 훨씬 간단할 수 있다. 또 다른 장점은 바로 setState를 통해서 this.state의 값을 얼마든지 쉽게 바꿀 수 있다는 것이다.
- 함수형
import React, {useState} from "react";
export default function EstimateMaker() {
const [userName, setUserName] = useState("");
const [data, setData] = useState({
m_id : "",
guest : "0",
est_type : "qty",
coc_flag : "N",
admin_es : "Y",
items : "[]",
});
}바로 useState와 같은 hook을 이용해서 좀 더 쉽고 간편하게 이용할 수 있다. hook은 state를 포괄적인 범위로 useState외에 useEffect, useCallback 등 다양한 종류들이 있지만, 이를 인지만 한다면 쉽게 이용할 수 있다는 장점이 있다. (해당 hook의 명칭만봐도 대체로 그 기능을 유추할 수 있다.) 또한 [] 괄호 내에서 현재 상태를 나타내는 변수와 함수 상태를 전화해줄 변수를 동시에 선언할 수 있어서 더 효율적인 장점이 있다.
3. Props
props 자체에 대해서는 헷갈렸던 부분이 많았지만, 결국, 하나의 함수 or 클래스에게 따르는 속성이라고 생각하면 된다. 이 속성은 전달하거나 전달받는 것으로 변경이 될 수 없는 부분이다.
- 클래스형
: this.state와 마찬가지로 state를 선언하는 곳에서 this.props로 선언된다.
- 함수형
export default function EstimateAsset(props) {
const handleEstimate = useCallback((event) => {
let checked = event.tartget.checked;
});
}괄호 속 props나 event(단순하게 e로도 많이 사용된다.)처럼 간단하게 해당 props를 넣어서 사용한다.
4. 이벤트
예를 들어 어떠한 버튼을 클릭했을 때, 그 버튼을 누름과 동시에 진행되는 행위가 바로 이벤트이다. 이벤트를 발생하게 하기 위해선, 이벤트와 관련된 기능을 넣어야하는데 이것에 대한 방식 또한 클래스형과 함수형 모두가 다르다. 두 컴포넌트 방식에서 가장 두드러지는 방식이라고 생각한다.
- 클래스형
export default class CartPage extends React.Component {
_changePayment = async(event) => {
this.setState({ od_change_money : event })
}
render() {
return(
<Button onClick={() => this._changePayment}>BTN</Button>
);
}
}화살표를 표시하는 것과 this를 붙여준다는 차이점이 있다.
- 함수형
export default function EstimateMaker() {
const handleChangeFlag = useCallback((e) => {
let checked=e.tartget.checkedle;
}
return (
<Buttton onClick={handleChangeFlag}>BTN</Button>
);
}단순하게 변수 선언과 마찬가지로 const로 선언한다. 다만, const를 선언한 후, 이벤트에 맞게끔 사용되는 양식이 따로 존재한다는 것이 특징이다.
5. LifeCycle
클래스 형과 함수형의 가장 큰 차이 중 하나는 바로 LifeCycle, 생명주기 메소드가 있다는 것이다. 단순하게 정해진 루틴이 없이 이루어지는 함수형과 달리, 클래스형에서는 각각의 위치에서 행해지는 역할이 다르다. componentDidMount / componentDidCatch / render 등이 바로 그 예다. 해당 것 역시 중요하고 상세하기 때문에 다음 장에서 따로 다룬다.
