class vs function

React에서는 두가지 방법으로 컴포넌트를 만들 수 있습니당~🥰
class컴포넌트와 function컴포넌트 이렇게 두가지가 있습니다!

---

1.Class vs Function 선언방법

Class Component

import React, {Component} from 'react';

class App extends Component {
render() {
   	 const name = 'lemon';
       	 return 
       		 <div className="react">
        		{name}
         	 </div>
    }
}

export default App;

import React , {Component} from 'react';

class Count extends Component {

	state = {
    		count:0,
  	  };
    
    render () {
    	return
        	<button>
        		{this.state.count}
        	</button>
    }
}

export default Count;

• class가 필요함.

• Component에서 상속이 필요함.

• 내부에 render() 필요함.

---

Function Component

import React from 'react';
import './App.css';

function App(){
	const name = 'lemon';
  	return 
  		<div className="react">
         		 {name}
  		</div>
}

export default App;

2.차이

Class Component

1. 주기적으로 업데이트 된다면 클래스형을 쓴다.
2. state 사용.
3. state가 변경이 되면 render가 호출됨.
4. lifeCycle method를 사용한다.

function Component

1. state,lifeCycle method가 없음-> hook을 사용함.
2. hook을 통해 state,lifeCycle method를 사용할 수 있다.
3. 정적인 표현일때 주로 사용한다.

---

3.state 사용 방법의 차이

State : 컴포넌트가 가지고 있는 값, 변경시 setState()사용함.

Class Component

• state 초기값 설정 가능. -> 이 때 state는 객체 형식.

state = {
	age:[],
  	userInput:"",
}

• this.setState로 state값을 변경 할 수 있다.

onClick={()=>{
	this.setState({age:age+1});
}}

Function Component

• useState함수로 state를 사용한다.

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

• useState는 상태의 기본값을 파라미터로 넣어서 호출.
• 배열이 반환됨 : 첫번째 원소는 현재 상태, 두번째 원소는 setter함수

4.props 사용 방법의 차이

Props : 부모 컴포넌트에서 자식컴포넌트로 값을 전달할때 사용한다.(읽기전용) -> 불변 (immutable)한 값.

Class Component

• this.props를 통해 불러옴.

const {name,children} = this.props;

Function Component

• props를 불러오지않고 바로 호출함.

const MyComponent({name,children})=>

출처:https://velog.io/@sdc337dc/0.%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8