클래스형 컴포넌트 vs 함수형 컴포넌트

리액트에서 함수형 컴포넌트를 권장하게 된 이유

•  리액트는 2가지의 방식으로 컴포넌트를 만든다. 함수형과 클래스형이 그것이다. 과거에는 클래스형 컴포넌트를 많이 사용했지만 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅 (Hook)을 지원하게 되면서 정확히는 함수형 컴포넌트 + 훅(Hook) 의 사용을 권장하고 있다.
•  클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로직을 가진 반면, 함수형 컴포넌트는 state를 사용하지않고 단순하게 데이터를 받아서 (props) UI에 뿌려준다. Hook들을 필요한 곳에 사용하면서 Logic의 재사용이 가능하다는 장점이 있다.

 

클래스형 컴포넌트 VS 함수형 컴포넌트

1. 선언 방식이 다르다.

- 클래스형 컴포넌트와 함수형 컴포넌트는 역할은(만) 동일하고, 선언방식이 (특히) 다르다.

// <클래스형 컴포넌트>
import React, {Component} from 'react'
	class App extends Component {
	render() {
		const name = "클래스형"
		return <div>{name}</div>
	}
}

export default App


// <함수형 컴포넌트>
import React from 'react'
	const App = () => {
		const name = '함수형'
		return <div>{name}</div>
}

export default App

2. State 의 차이

- State란 컴포넌트 내부에서 바뀔 수 있는 값을 말한다.

// <클래스형 컴포넌트>
import React, {Component} from 'react'

class App extends Component {
	constructor(props) {
	super(props)
	this.state ={
	  test1: [],
	  test2: '',
	  number: 1
	}
}
render() {
	const name = "클래스형"
	return <div>{name}</div>
	}
}

export default App



// <함수형 컴포넌트>
import React from 'react'

const App = () => {
	const [test1, setTest1] = useState([])
	const [test2, setTest2] = useState('')
	const [number, setNumber] = useState(1

	const testFunction = () => {
	setNumber(number + 1)
	}
	const name = '함수형 컴포넌트'
	return <div>{name}</div>
}

export default App

3. Props 의 차이

- Props 란 컴포넌트의 속성을 설정하며, 읽기 전용으로 컴포넌트 자체 props를 수정하면 안된다.

- 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야한다.

- 수정되는 값은 state 이다.

// <클래스형 컴포넌트>
import React, {Component} from 'react'

class App extends Component {
render() {
	const {number, testName} = this.props
	const name = "클래스형"
	return <div>{testName}의 나이는 {number}살 입니다.</div>
	}
}

export default App

// this.props로 통해 값을 불러올 수 있다.


// <함수형 컴포넌트>
import React, { useState} from 'react'

const App = ({number, testName}) => {
	const title = '함수형'

	return (
	  <div>
		{testName}의 나이는 {number}살 이다.
	  </div>
	)
}

export default App

// props를 불러올 필요 없이 바로 호출 할 수 있다.

4. 이벤트핸들링

- 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(Event) 라고 한다. 조금 더 쉽게 말하면 클릭, 키보드 입력 등 사용자의 어떤 행위이며 이러한 이벤트를 처리 하는 것을 이벤트 핸들링이라고 한다.

- 아래 참고자료를 통해 다양한 종류 이벤트를 확인 할 수 있다.

합성 이벤트(SyntheticEvent) – React

// <클래스형 컴포넌트>
import React, {Component} from 'react'

class App extends Component {
	constructor(props) {
		super(props)
		this.state ={
		  number: 1
	}
}
onClickFunc = () => {
this.setState({number : number+1})
}
render() {
	const name = "클래스형"
	return (
		<div>
		  <button onClick={this.onClickFunc}>+1 버튼</button>
		</div>
		)
	}
}

export default App

// 1. 함수 선언시 화살표 함수로 바로 선언 가능하다.
// 2. 요소에 적용할 때 this. 을 붙여줘야한다.



// <함수형 컴포넌트>
import React from 'react'

const App = () => {
	const [number, setNumber] = useState('')

	const onClickFunc = () => {
	setNumber(number + 1)
}
const name = '함수형 컴포넌트'
return (
	<div>
	  <button onClick={onClickFunc}>+1 버튼</button>
	</div>
	)
}

export default App

// 1. const + 함수 형태로 선언해야한다.
// 2. 요소에 적용할 때 this가 필요없다.

5. LifeCycle

- 라이프사이클이란 리액트에서 컴포넌트는 여러 종류의 “생명주기 메서드”를 가지며 이것 을 상속하여 재정의해서 특정 시점에 코드가 실행되도록 설정한다.

- 클래스 컴포넌트에만 해당되는 내용이며, 함수형 컴포넌트는 Hook을 사용하여 생명주기 에 원하는 동작을 한다.