1. React
1) Class형 vs 함수형
1-1) 함수형 컴포넌트
import React from 'react';
import './App.css';
function App() {
const name = 'react';
return <div className = "react">{name}</div>
}
export default App;
1-2) 클래스형 컴포넌트
import React, {Component} from 'react';
class App extends Component {
render() {
const name = 'react';
return <div className="react">{name}</div>
}
}
export default App;
1-3) 차이점 정리
함수형:
- State, LifeCycle 관련 기능 사용 불가능.(Hook으로 해결)
- 메모리 자원 사용에 있어 class형 컴포넌트보다 효율적.(메모리 덜 사용함)
- 컴포넌트 선언 편함.
클래스형:
- State, LifeCycle 관련 기능사용 가능.
- 메모리 자원 사용에 있어 class형 컴포넌트보다 효율적.(메모리 더 사용함)
- 임의 메서드 정의할 수 있음.
2) React hooks
React Hooks은 React 16.8버전에 새로 추가된 기능이다.
예를 들어, function component에서 state를 사용할 수 있게 됨.
React hook을 사용할 경우, class component, render 등을 사용하지 않는다.
모든 것은 하나의 function으로 함수형 프로그래밍이 가능해짐.
'코딩 > React' 카테고리의 다른 글
WIL #6 (0) | 2022.02.20 |
---|---|
WIL #5 (0) | 2022.02.14 |
WIL #3 - React 숙련 주 (0) | 2022.01.31 |
1주차 입문 #3 - Props, State(될 때까지 판다.) (0) | 2022.01.27 |
1주차 입문 #2(수정 중) (0) | 2022.01.22 |