hyeoneee's blog

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

3. 차이점 (2) State

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

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

그래서,,

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

아니면!

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

3. 차이점 (3) Lifecycle Hooks

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 쓸걸~~ㅎㅎ

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