React-Native
[React-Native] Class vs Function
TrueSik
2022. 6. 1. 01:18
React에서 컴포넌트를 작성하는 방법은
클래스형(Class Component)과 함수형(Function Component) 두 가지 방법이 있다.
현재는 함수형 방식으로 구현을 많이한다.
하지만 클래스형 방식으로 구현이 된 프로젝트가 많기 때문에 클래스형 방식도 배워야 한다.
1. 선언
- 클래스형 컴포넌트
import React, {Component} from 'react';
class App extends Component {
render() {
const name = 'react native';
return <View><Text>{name}</Text></View>
}
}
export default App;- class 키워드 사용
- Component 상속
- render() 메서드가 반드시 있어야 함
- 함수형 컴포넌트
import React from 'react';
function App() {
const name = 'react native';
return (
<View><Text>{name}</Text></View>
)
}
export default App;
OR
const App = () => {
const name = 'react native';
return (
<View><Text>{name}</Text></View>
)
}
export default App;- function 키워드 사용
- function 키워드를 사용하지 않고 화살표 방식 함수로 선언 가능
2. 차이
- 클래스형 컴포넌트
- state, lifeCycle API 사용 가능
- 메모리 자원을 함수형 컴포넌트보다 조금 더 사용
- 임의 메서드를 정의할 수 있음
- 함수형 컴포넌트
- state, lifeCycle 관련 기능 사용 불가능 [Hook을 통해 해결됨]
- 메모리 자원을 함수형 컴포넌트보다 덜 사용
- 컴포넌트 선언이 편함
3. State 사용
- 클래스형 컴포넌트
- constructor에서 this.state 초기 값 설정 가능 ( constructor 없이 초기화 가능 )
constructor(props) {
super(props);
this.state = {
number: 0,
list: [],
}
}
OR
state = {
number: 0,
list: [],
}- 클래스형에서는 state는 객체 형식
- this.setState 함수로 state의 값을 변경함.
this.setState({number: 12})- 함수형 컴포넌트
- state를 useState() 사용하여 관리함.
- 배열의 첫 번째 요소는 현재 값
- 배열의 두 번째 요소는 첫 번째 요소를 바꾸는 함수
- useState(0) 함수의 () 안의 값은 초기 값을 설정
const [number, setNumber] = useState(0);4. Props 사용
- 클래스형 컴포넌트
- this.props를 통해서 props 값을 가져올 수 있음
const {number, list} = this.props;- 함수형 컴포넌트
- 매개변수로 받아서 바로 사용이 가능함
const App = ({number}) => {
return <View><Text>{number}</Text></View>
}5. LifeCycle
- LifeCycle API : 컴포넌트가 DOM 위에 생성되기 전 후 및 데이터가 변경되어
상태를 업데이트하기 전 후로 실행되는 메서드
6. 이벤트 핸들링
- 클래스형 컴포넌트
- 함수 선언 시 화살표 함수로 바로 선언이 가능
- 함수를 사용할 때 this를 사용해야 함
//함수 선언
handleChange = () => {
this.setState({number: number + 2});
}
// 함수 사용
<TextInput
onChange={this.handleChange}
/>- 함수형 컴포넌트
- const 키워드를 사용해서 함수 선언
- 함수를 사용할 때 this 없이 사용 가능
//함수 선언
const handleChange = () => {
setNumber(15);
}
//함수 사용
<TextInput
onChange={handleChange}
/>
참고