Component 만들기

☝ 요약본

• 컴포넌트 내부에 State 가
  • 있다면 ▶ Class 함수 컴포넌트 사용
  • 없다면 ▶ Function 컴포넌트 사용
• 컴포넌트 내부에 Life Cycle ( 라이프 사이클 ) 메서드가
  • 있다면 ▶Class 함수 컴포넌트 사용
  • 없다면 ▶ Function 컴포넌트 사용

👉👉 하지만, React 16.8 버전 이후에는 React Hook 이라는 것이 도입되어서, 함수 컴포넌트 안에서도 State 를 가질수 있고, Life Cycle 메서드를 사용할 수 있게 되었기 때문에, Class 함수 컴포넌트에서 썼던 기능들을 함수 컴포넌트 안에서도 사용할수 있다.

1. Class 함수 컴포넌트 ( 이하, Class 컴포넌트)

▶ React 에서 제공하는 Class 컴포넌트를 상속해서 만든다.

// ClassComponent : 내가 만드는 컴포넌트 이름 (변수 이름 같은..)

class ClassComponent extends React.Component { } 

• 컴포넌트 안에 State 가 있어야 한다면, Class 컴포넌트를 써야 한다.
  컴포넌트 내부에 State 가 있고, 해당 State 의 값이 변경될때마다 컴포넌트가 주기적으로 업데이트가 되어야 한다면 Class 컴포넌트를 써야 한다.

  컴포넌트 내부에, 데이터의 값들이 담겨있는 State라는 객체가 있고, 그 State가 변경되면 render함수가 호출이 되면서 업데이트 된 내용이 보여진다.

• 컴포넌트 안에 Life Cycle 메서드[^1]가 있어야 한다면, Class 컴포넌트를 써야 한다.

  [^1]: 개발자가, 컴포넌트가 사용자에게 보여질때나 돔트리에 올라갔을 때나 돔트리에서 나왔을때나 컴포넌트가 업데이트 됬을때 등등 컴포넌트 상태에 따라서 user Interface 가 바뀌도록 코드를 구현해놓으면 리액트가 자동으로 알아서 호출해주는 메서드

• Class 컴포넌트 내부에 있는, 멤버변수( State 등 )에 접근(참조)하려면, 멤버 변수 앞에 this 키워드를 붙여서 접근해야 하는데, 접근할때마다 계속 this 키워드를 사용해야 한다는 번거로움이 있다.

• 컴포넌트가 마운트 되었을때, 언마운트 되었을 때, 업데이트 되었을 때 등 세부적으로 함수가 나눠져있어서 중복이 있는데, 리액트 훅을 사용하면 중복을 줄일수 있다.

• Class 컴포넌트 안에서 함수를 정의할때, 메서드 선언하는 것처럼 function 키워드 생략해서 정의하면 Error 가 난다.
  Class 컴포넌트 안에서 함수를 정의하려면 화살표 함수일때는 변수 선언 키워드를 생략할수 있지만, function 키워드는 생략하면 절대 안된다.

2. Function 함수 컴포넌트 ( 일반 함수 컴포넌트 : 이하, 함수 컴포넌트 )

▶ 일반 기명함수 처럼 만든다.

function App() { 
    retutn <h1>Hello</h1>
}

• 컴포넌트 안에 State 가 없다면 함수 컴포넌트를 써야 한다.
  항상 정적으로 데이터가 표기가 된다면 함수 컴포넌트를 써서 간단하게 컴포넌트를 만들수 있다.

• 컴포넌트 안에 Life Cycle 메서드가 없다면 함수 컴포넌트를 써야 한다.

• 함수 컴포넌트 안에는 State 와 Life Cycle 메서드는 없지만, React 16 버전 이후에 도입된 React Hook 이라는 기능 덕분에, Class 컴포넌트 안에서만 사용할수 있는 State 와 Life Cycle 같은 것을 써먹을수 있게 되었다.