component란?

React에 재활용가능한 UI단위

왜 component를 쓰는가?

• 재활용하여 사용할 수 있다.
• 코드 유지보수에 좋다.
• 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.
• 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)

---

React의 컴포넌트를 만드는 방법에는 Class 컴포넌트와 함수 컴포넌트가 있다.

Class component

• 리액트에서 제공하는 클래스컴포넌트를 를 상속하여 만든다.
• 컴포넌트 안에 들어있는 data를 담고있는 state 객체 와 ui를 나타내는 render 함수로 이루어져 있다.
• 컴포넌트에 상태가 있고, 주기적으로 업데이트 되어야 한다면 클래스 컴포넌트
• 상태에 따른 (Dom tree에 올라갔거나, 나왔을 때, 컴포넌트가 업데이트 되었을 때, 등등)life cycle method 가 있다.

함수형 component

• 함수로 컴포넌트를 만든다.
• 상태가 없고 정적으로 데이터가 표기가 된다면 간단하게 만들기 함수형을 만드는 방법이 있다.
• state 오브젝트가 따로 없고 라이프사이클 메소드가 없다.
  → 그렇기 때문에 16.8 버전부터는 React Hook이라는 개념이 도입되었다. hook을 통해서 함수형 컴포넌트에서 state도 가질 수 있고 life cycle method 도 사용할 수있다.

Why function component?

• 기존 스크립팅 언어를 사용하는 개발자나, 디자이너와 협업시에 클래스를 이해하는데 의 개념은 어려움을 겪었다.
• 멤버 변수에 접근할 때, this 바인딩 이슈가 생긴다.
• 클래스 컴포넌트에는 라이프사이클 등의 세부적으로 함수들이 나누어져 있어서, 중복되는 코드들을 작성하게 되었었는데, react hook을 쓰면서 중복된 것을 줄일 수 있어졌다.