5/22 Dev.Feedback(React. class component vs function component)

React는 컴포넌트들이 모여서 구성된다.

컴포넌트에는 두가지 종류가 있는데

하나는 Class component 그리고 다른 하나는 Function component이다.

하나의 컴포넌트는 보통 한가지의 기능을 구현하기 위해 여러 다발의 코드를 모아 놓는다.

컴포넌트는 각각의 기능 별로 구분을 해놓았기에 독립적으로 재사용이 가능하다.

 

***최근 React Hook이 도입됨으로 인해 기존에 Class component를 사용하는 것보다 Function Component를 사용하는 편이다.

하지만 최신의 변화에 적응하기 전! 기존의 개념들을 확실하게 이해를 하고자 한다.

그래야 현업에 갔을 때, 다른 선배들과 협업이 가능할 것이기에 

Class component 구성

import React from 'react';

// Class component 구성//
class Like Button extends Component{
	state = {
    	numberOfLikes: 0,
    };
    render() {
    	return <button>
        {this.state.numberOfLikes}
        </button>;
    }
}
// 여기까지가 LikeButton을 눌렀을 때, 그 갯수가 올라가는 기능을 구현한 Component 구성//
export default LikeButton;

먼저 내 컴포넌트에 상태가 있고, 주기적으로 그 상태가 변경되는 경우라면 클래스 컴포넌트를 사용하는 것이 좋다.

state라는 객체가 변경이 되면, render 함수가 돌아가며, 변경된 값을 사용자에게 전달을 해주는 형식

그리고 life cycle methods가 존재

 

Function Component

React Hook이 업데이트 되기 전에는 일반적으로 정적인 데이터의 컴포넌트를 구현할 때 사용함.

state 혹은 life cycle method가 존재하지 않았음

 

React Hook이 업데이트 되고 나서부터 Class Component처럼 State, life cycle methods를 포함할 수 있게 됐고,

업데이트를 하는 기능 구현도 가능하게 됐다.

 

React 훅이 도입된 이유

• Class component가 어려워서
• 디자이너들과의 협업을 위해서
• 반복적으로 호출해야 하는 this
• Binding issue