Class Component vs Function Component

• React는 Component들로 이루어져 있다

• React를 사용하여 개발을 할 때 두가지 방법으로 Component를 선언 할 수 있다
  (1. Class Component 2. Function Component)

• 기존 Function Component는 state, lifeCycle 사용이 불가능했지만 React Hook의 등장으로 최근 많이 쓰이고 있다 (공식문서에서도 Function Component + React Hook 사용을 권장)

• 하지만 현업에서는 Class Component로 만들어진 프로젝트들이 많기 때문에 Class Component도 공부하자

Component ?

• Component란 독립적이고 재사용이 가능한 것을 말한다
  
  
• React에서 Component란 화면상에 보여지는 UI 단위를 말한다 (state, render 함수 등)

😄 Class Component

• 선언 방식

class App extends Component {
    state = {
    	number: 0,
    };

    render() {
        return <button>
            {this.state.number}
        </button>;
    }

}

export default App;

• Class Component는 기본적으로 React에서 제공해준다

• class 키워드가 필요하며 Component로 상속 받아야한다

• render() 함수는 필수적으로 있어야 한다

• state, lifeCycle 사용이 가능하다

• state : Component 내부에서 데이터를 보관하는 object

• render() : state가 변경이 될때마다 React가 자동으로 호출하는 함수

• render() 내부에는 JSX를 반환해야 한다. 즉 return문에 JSX를 사용해야 한다

😍 JSX에 대한 자세한 설명은 제 벨로그에 있습니다 😍

😄 Function Component

• 선언 방식

function App() {
  const name = 'sam';
  return <h1>hello, {name}</h1>;
}

• 기존에는 state, lifeCycle 사용을 못했지만 React Hook의 등장으로 해결되었다

• 선언문만 보더라도 Class Component보다 간편하다

• Class Component보다 메모리 자원을 덜 사용한다

• Function Component의 선언방식은 화살표 함수 선언 방식과 일반적인 함수 선언 방식이 있다

함수에서의 this

• 화살표 함수에서 this : 자신이 종속된 인스턴스를 가리킴
  (즉 상위 scope의 this를 가리킨다)
  
  
• 일반 함수에서 this : 자신이 종속된 객체를 가리킴

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍