React 클래스형 컴포넌트와 함수형 컴포넌트의 차이
React 클래스형과 함수형 컴포넌트 차이점
| No | 클래스형 컴포넌트 | 함수형 컴포넌트 |
| 선언의 차이 | - class 키워드 필요 - Component로 상속을 받아야하며, render 메소드가 반드시 필요함 - state,lifeCycle 기능 사용이 가능 |
- state,lifeCycle 관련 기능 사용 불가능 - 컴포넌트 선언이 용이함 |
| state | - constructor 안에서 this.state 초기값 설정 - constructor 없이도 바로 state 초기값을 설정 가능 - this.setState()를 통해 state값을 변경 - 컴포넌트의 state는 객체형식 |
- useState 함수로 state 사용 - useState 함수를 호출하면 배열이 반환되는데 첫번째 원소는 현재상태, 두번째 원소는 상태를 바꿔주는 함수 ! |
| props | - this.props로 값을 불러올 수 있음 |
- props를 불러욜 필요 없이 바로 호출이 가능 |
1. 선언의 차이
- 클래스형 컴포넌트
- class 키워드가 필수로 들어가며, Componnent로 상속을 받아야 합니다
- render 메소드가 반.드.시 있어야함
import React,{Component} from 'react';
class App extends Component {
render() {
const name = "또깽이 소소하고 행복한 공간";
return <div className="react">{name}</div>
}
}
export default App;함수형 컴포넌트
import React from 'react';
import './App.css';
function App() {
const name = '또깽이의 소소하고 행복한 공간';
return <div className = "react">{name}</div>
}
export default App;2. state
state란? 컴포넌트 내부에서 바뀔 수 있는 값 !
클래스형 - 컴포넌트의 state는 객체형식
this.state = { monsters: [], userInput: "", };클래스형 - this.setState()를 통해 state값을 변경
onClick = {() => {
this.setState({number: number * 1});
}}
함수형 - setState 함수로 state의 값을 변경
const [number, setnumber] = useState('');3. props
클래스형 - this.props로 값을 불러 올 수 있다 !
class MyComponent extends Component {
render() {
const {name, habit} = this.props;
return (
<div>
이릉은 {name} 입니다. <br/>
나의 취미는 {habit} 입니다.
</div>
)
}
}
함수형 - props를 불러 올 필요 없이 바로 호출할 수 있다.
const MyProps = ({ name, habit}) => {
return (
<div>
안녕하세요, 제 이름은 {name} 입니다.
나의 취미는 {habit} 입니다.
</div>
);
}
결론,
클래스형은 render함수를 사용해서 렌더링을하며, state값을 사용할 때 constructor함수에서 this.state로 초기값 설정이 가능합니다. state를 업데이트 하기 위해서는 this.setState를 사용합니다. props를 조회하거나 이벤트 핸들링 할 때 this를 사용할 수 있습니다. 또한, lifecycle 메소드를 가지고 사용할 수 있습니다.
함수형은 리액트 hooks 중 useState 를 사용하여 state 값을 업데이트하거나 props와 이벤트 헨들링에 this가 필요하지 않습니다. 또한, lifecycle도 useEffect 라는 hooks를 사용합니다.
참고자료
https://born-dev.tistory.com/27
https://koras02.tistory.com/m/177
[React] 클래스형 컴포넌트와 함수형 컴포넌트의 차이
1. 클래스형 컴포넌트 react 컴포넌트를 선언하는 두가지 방식 중 하나. [클래스 컴포넌트 & 함수 컴포넌트] 현재 자주 사용하지 않지만, 아직도 사용하는 기업들도 있다. 클래스형으로 구성된 프
koras02.tistory.com