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 쓸걸~~ㅎㅎ
뭐 자세히 알아보았다 ^_^ㅎㅎ
'DEVELOP > Frontend' 카테고리의 다른 글
| [Vue] Component Force Rerendering 하기 (강제로 rerender) (2) | 2021.10.26 |
|---|---|
| [Vue] computed , watch 중에서 뭐써야하지??? 헷갈리네 (0) | 2020.10.30 |
| [Vue] 컴포넌트를 특정부분만 수정해서 쓰고싶다면? Slot ( 컴포넌트 재사용하기) (0) | 2020.06.25 |
| Angular vs React vs Vue.js 비교 (0) | 2019.12.06 |
| Angular vs React vs Vue 비교 (0) | 2019.11.25 |