🔔 컴포넌트(Component) 생성

첫번째로 class로 컴포넌트를 생성하는 방법이 있고 두번째 방법으로는 function을 이용하여 컴포넌트를 생성하는 것이다.

1)
import React, { Component } from 'react';
class App extends Component {
  render () {
    return (
      <h1>Hello, World!</h1>
    );
  }
}
export default App;
// import : 가져온다
// export : 내보낸다

2)
import React from 'react';
export default function App () {
  return (
    <h1>Hello, World!</h1>
  );
}
// export default App;

🧖🏻‍♀️class컴포넌트 function컴포넌트 차이?

class 컴포넌트는 state와 lifecycle method를 가질 수 있다. 하지만 function 컴포넌트는 state와 lifecycle method를 가질 수 없다. 다만, React Hook(react 16.8버전부터)을 통해서 state와 lifecycle method를 가질 수 있게 되었다.

💁🏻‍♀️그러면 class를 쓰면되지 왜 React Hook이 도입이 됬는가?
☝🏻첫번째
class는 어렵다.
객체지향언어인 c#, JAVA를 배운사람들은 쉽겠지만 스크립팅언어들만 쓰던 개발자들은 어려움을 겪었다.
✌🏻두번째
멤버변수에 접근할 때 항상 this라고 붙여야 함
=> 불편하다.
🤟🏻세번째
바인딩 이슈
=> 불편하다.
🖖🏻네번째
리액트 훅은 중복선언 되는 것을 줄일 수 있다.

기존의 많은 프로젝트들이 클래스 컴포넌트를 썼기 때문에 클래스 컴포넌트에 대해서도 알아두긴 해야한다.