Hooks가 도입되기 전에 함수형 컴포넌트는 stateless 컴포넌트로 불렸다. 기능 기반에서 클래스형 컴포넌트 뒤에 있었다. 하지만 Hooks가 도입된 후 함수형 컴포넌트는 클래스형 컴포넌트와 동일한 기능을 가지게 되었다.
Stateful 컴포넌트 - state를 사용하는 경우 / Container
class Main extends Component {
constructor() {
super()
this.state = {
books: []
}
}
render() {
<BooksList books={this.state.books} />
}
}Stateless 컴포넌트 - state를 사용하지 않는 경우 / Presentational
const BooksList = ({books}) => {
return (
<ul>
{books.map(book => {
return <li>book</li>
})}
</ul>
)
}Hooks가 새로운 트렌드로 들어왔지만 React 팀은 클래스형 컴포넌트를 유지한다고 했다. 때문에 클래스형 컴포넌트도 알고 있는 것이 좋다.
다음을 기준으로 함수형 컴포넌트와 클래스형 컴포넌트를 비교한다.
3-1. Decalaration
함수형 컴포넌트
함수형 컴포넌트는 화살표 함수 또는 함수 선언식으로 선언이 가능하다.
function card(props){
return(
<div className="main-container">
<h2>Title of the card</h2>
</div>
)
}
const card = (props) =>{
return(
<div className="main-container">
<h2>Title of the card</h2>
</div>
)
}클래스형 컴포넌트
클래스형 컴포넌트는 ES6의 class문법으로 선언이 가능하다.
class Card extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<div className="main-container">
<h2>Title of the card</h2>
</div>
)
}
}3-2. Handling props
아래 컴포넌트를 각각 컴포넌트에서 어떻게 렌더링 하는지 살펴보자.
function StudentInfo(props){
return(
<div className="main">
<h2>{props.name}</h2>
<h4>{props.rollNumber}</h4>
</div>
)
}클래스형 컴포넌트
클래스형 컴포넌트에서 props를 다루기 위해서는 this 키워드를 사용한다.
class StudentInfo extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<div className="main">
<h2>{this.props.name}</h2>
<h4>{this.props.rollNumber}</h4>
</div>
)
}
}3-3. Handling state
함수형 컴포넌트
함수형 컴포넌트에서는 state를 다루기 위해서 hooks를 사용한다.
function ClassRoom(props){
let [studentsCount,setStudentsCount] = useState(0);
const addStudent = () => {
setStudentsCount(++studentsCount);
}
return(
<div>
<p>Number of students in class room: {studentsCount}</p>
<button onClick={addStudent}>Add Student</button>
</div>
)
}클래스형 컴포넌트
클래스형 컴포넌트에서는 hooks를 사용할 수 없기 때문에 다른 방식으로 state를 다룬다.
this.state 를 사용하여 studentsCount 변수를 추가하고 값을 0 으로 초기화한다
state를 읽을 때에는 this.state.studentsCount 로 값을 읽을 수 있다.
state를 변경하기 위해서는 this.setState 를 사용한다.
class ClassRoom extends React.Component{
constructor(props){
super(props);
this.state = {studentsCount : 0};
this.addStudent = this.addStudent.bind(this);
}
addStudent(){
this.setState((prevState)=>{
return {studentsCount: prevState.studentsCount++}
});
}
render(){
return(
<div>
<p>Number of students in class room: {this.state.studentsCount}</p>
<button onClick={this.addStudent}>Add Student</button>
</div>
)
}
}클래스형 컴포넌트
-
상태를 저장할 수 있고(state사용이 가능함), React Life Cycle Method 를 사용할 수 있다.
-
React.Component를 상속받기 때문에 리액트에서 제공하는 기능들을 모두 내것처럼 사용할 수 있다.
-
함수가 아닌 클래스이기 때문에 return문을 사용하지 않는다.
-
render() 함수가 필수적으로 있어야 한다.( render() 함수를 사용해서 JSX를 반환)
-
임의의 메서드를 정의할 수 있다.
-
함수형 컴포넌트가 먼저 나왔기 때문에, 유지보수를 위해 클래스형 컴포넌트를 알아두어야 함
함수형 컴포넌트
-
함수형은 상태를 저장할 수 없다. 기본적으로 함수는 한번 실행되고 나면 메모리 상에서 사라진다. (가비지 컬렉팅)
-
함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점
-
함수형 컴포넌트에서만 사용할 수 있는 hooks는 로직을 state와 분리할 수 있게 해주기 때문에 로직을 재사용할 수 있게 해준다.
-
hooks 는 클로저 원리를 이용해서 state 를 저장한다.
-
빌드 후 배포시에 결과물의 크기가 작다.
-
return문을 사용해서 JSX를 반환
참고자료
