React : Functional component 와 Class component의 차이점

 

React를 공부하다보니깐

compoent의 종류가 두가지가 있었다

Functional compoent와 class component

 

두개의 차이점이 궁금해졌다

 

그래서 알아보고자한다 

 

사실 create-react-app 으로 프로젝트 생성할때 이전에는 class component로

생성 되었던거 같은데 이번엔 functional component로 생성되길래 

오잉또잉??ㅇㅅㅇ???

해서 찾아보게 된것이다,,,

 

후후 이글은 사실

https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108

 

다음글을 거의 해석한것과 다름없다.

 

그럼 시작해보자 꼬고!

 

 

---

 

1. Functional Component VS Class Component

 

Functional Component : 그냥 Plain javascipt 

function Welcome(props) {
	return <h1>Hello, {props.name}</h1>;
}

 

Class Component

class Welcome extends React.Component {
  render() {
		return <h1>Hello, {this.props.name}</h1>;
	}
}

 

 

2. 차이점 (1) Syntax

Functinal Component	Class Component
javascript function	extends React
plain javascript 문법을 사용하여 props를 받아들이고  React element return	render() 사용하여 React element return

 

 

3. 차이점 (2) State

*** React 16.8에 Hooks가 업데이트 되었다. Functional 에서도 useState로 state를 사용 할 수 있다.

 

 

functional Component에서는 state를 쓸 수 없다. 당연히 setState를 못쓴다.

그렇기 때문에 이전에는 functional Stateless components라고도 불렀다.

 

그래서,,

state를 쓰고 싶으면 Class Component를 써야한다.

 

아니면!

Parent Component로 state를 올려서 functional component에게 props로 내려주어야한다.

 

 

 

3. 차이점 (3) Lifecycle Hooks

*** React 16.8에 Hooks가 업데이트 되었다. Functional 에서도 useEffet를 사용 할 수 있다.

 

Functional Component에서 lifecycle hokks를 사용하지 못한다. 

state를 사용 못하는 이유와 같은데, Lifecycle hooks는 React에서부터 온 것이기 때문이다.

 

그래서,,

Lifecycle Hooks를 사용 하려면 Class Compnent를 사용해야 한다.

 

 

 

 

4. 그렇다면,,, Functional Component를 왜써???????ㅇㅅㅇ?

 

1. Functional Component는 훨씬 더 쉽게 읽고 테스트 할 수 있다.

  state도 없고, lifecycle도 없이 그냥 javascript 문법이기 때문이다.

2. 코드가 더 적다

3. 코드가 더 간단

4. React Team에서 functional Component 성능을 더 좋아지게 할거랬어,,

 

 

5. 결론

그렇다면,,,

어떻게 사용하는 것이 좋을까?

state 와 lifecycle hooks를 사용할거면 당연히  Class Component를 사용 

사용하지 않는 다면~ Functional Component를 사용 하면 된다.

 

ㅎㅎ; 왜알아본거지

그냥 Functional Component 쓸걸~~ㅎㅎ

 

뭐 자세히 알아보았다 ^_^ㅎㅎ