리액트에서는 컴포넌트를 선언할 떄는 클래스형 컴포넌트와, 함수형 컴포넌트가 있다.
함수형 컴포넌트에 훅(Hook)이 나오기 전에는 클래스형 컴포넌트를 많이 사용했다. 하지만 현재는 리액트 공식문서에도 함수형 컴포넌트를 사용하기를 권장하고 있다. 그렇다고 클래스형 컴포넌트를 모르면 안된다.!
클래스형 컴포넌트와 함수형 컴포넌트의 차이 🖐
1. 선언 방식 🟣
클래스형 컴포넌트
- state 기능 및 라이프 사이클 기능을 사용할 수 있다
- Component로 상속
- render 함수가 꼭 있어야 함
- class 키워드 필요
- 함수형보다 메모리 자원을 더 사용한다.
import React, { Component } from 'react';
class App extends Component {
render() {
const name = '리액트';
return <div>{name}</div>;
}
}
export default App;함수형 컴포넌트
- 기존의 일반적인 함수 선언 방식(ES6의 화살표 함수(arrow function) 방식도 있다)
- 파라미터로 전달할 때 유용
- 클래스형 컴포넌트보다 선언하기가 좀 더 편하다
- 메모리 자원을 덜 사용한다는 장점이 있다
- state와 라이프사이클 API를 사용할 수 없다는 단점이 있었는데 React Hook을 도입하면서 해결
function BlackDog() {
this.name = '흰둥이';
return {
name: '검둥이',
bark: function() {
console.log(this.name + ': 멍멍!');
}
}
}
const blackDog = new Blackdog();
blackDog.bark(); // 검둥이: 멍멍!
function WhiteDog() {
this.name = '흰둥이';
return {
name: '검둥이',
bark: () => {
console.log(this.name + ': 멍멍!');
}
}
}
const whiteDog = new Whitedog();
whiteDog.bark(); // 흰둥이: 멍멍!2. state 🟣
state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
클래스형 컴포넌트에서는 클래스 내의 constructor 메서드에서 state의 초기값을 생성해 주어야 한다. 그리고 constructor를 작성할 때 super(props)를 반드시 호출해 주어야 한다. state를 조회할 때는 this.state로 조회하며, state의 값을 변경하고 싶을 때는 this.setState 함수를 통해서 바꾸어 준다.
this.state = {
monsters: [],
userInput: "",
}함수형 컴포넌트에서는 리액트 훅을 사용하여 useState 함수를 통해 state 값을 불러오고 변경할 수 있다
const [value, setValue] = useState('');3. props 🟣
부모 컴포넌트가 설정해서 자식 컴포넌트는 읽기만 할 수 있는 값
클래스형 컴포넌트는 this.props로 통해 값을 불러올 수 있다.
함수형 컴포넌트는 props를 불러올 필요 없이 바로 호출 할 수 있다
4. 이벤트 핸들링 🟣
클래스형 컴포넌트
- 함수 선언시 화살표 함수로 바로 선언 가능하다.
- 요소에 적용할때 this.를 붙여줘야한다.
class App extends Component {
constructor (props) {
super (props)
this.state = {
number : 1
}
}
onClickFunc = () =>{
this.setState({number : number+1})
}
<button onClick={this. onClickFunc}>+1</button>
함수형 컴포넌트
- const + 함수 형태로 선언해야 한다.
- this를 적지 않아도 된다.
const [number, setNumber] = usetState('')
const onClickFunc = () => {
setNumber( number + 1)
<button onClick={onClickFunc}> +1 </button>출처
https://born-dev.tistory.com/27
https://devowen.com/298
https://velog.io/@sdc337dc/Class-Component%EC%9D%98-Life-Cycle
FrontEnd Developer