react에서 컴포넌트를 선언하는 방식은 클래스 컴포넌트와 함수 컴포넌트 두 가지가 있으나 현재는 함수형 컴포넌트 사용을 권장하고 있다.
클래스 컴포넌트
클래스를 선언하듯 컴포넌트를 class 형식으로 선언하는 방식
현재 현업에서는 잘 사용하지 않고 있다.
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
message: "Hello!"
}
}
render() {
return <div className="message">{message}</div>
}
}
export default App;
JavaScript
복사
class 키워드를 사용해 컴포넌트를 선언하고 이를 Component로 상속받아야한다.
render() 메소드를 이용해 렌더링할 형식 지정
state는 객체 형식이며 this.setState()함수를 통해 state 값을 변경한다.
props는 this.props를 통해 값을 불러올 수 있음
const { name, age } = this.props;
JavaScript
복사
이벤트 핸들링 함수 선언 시 화살표함수로 바로 선언 가능
적용 위해서는 this를 붙여야한다.
•
메모리 자원을 함수형 컴포넌트보다 조금 더 사용
•
임의 메서드 정의 가능
함수형 컴포넌트
함수를 선언하듯 컴포넌트를 선언하는 방식
import React from 'react';
function App() {
const [message, setMessage] = useState('Hello')
return <div className="message">{message}</div>
}
export default App;
JavaScript
복사
useState 함수를 사용해 state를 변경
props를 바로 호출
•
메모리 자원을 함수형 컴포넌트보다 덜 사용
•
컴포넌트 선언이 편리