리액트는 컴포넌트들로 이루어져있음 (뷰도!)

컴포넌트를 만드는 방법으로는 클래스 혹은 펑션을 이용하면 된다.

클래스로 컴포넌트를 만드려면 클래스를 상속(extends)받아 만들 수 있고

class LikeBtn extends Components {
	state = {
		numberOfLikes: 0,
	},
	render() {
		return <button>
			{this.state.numberOfLikes}
		</button>;
	}
}

함수로 만드려면 함수를 선언해서 만들면 된다

funtion App(){
	return <h1>Hello</h1>
}

클래스로 컴포넌트를 만드는 경우에는 컴포넌트 내에 state가 있고, 그 state에 따라서 컴포넌트가 주기적으로 업데이트 되어야 한다면 클래스로 컴포넌트를 만들면 되고,

만약 데이터가 정적이라 상태를 업데이트하지 않아도 된다면 함수로 만들면 된다

클래스 컴포넌트

• 함수들이 모아져 있고
• 데이터를 담을 수 있는 스테이트라는 오브젝트가 들어있음
• state가 변경이 되면 render함수가 호출이 되면서 업데이트 된 내용이 사용자에게 보여진다
• 라이프사이클 메소드가 존재함
  • 컴포넌트가 사용자에게 보여질때, DOM tree에 올라갔을때, DOM tree에서 나왔을때, 컴포넌트가 업데이트 되었을때 등등 상태가 변경될 때마다 개발자가 함수를 구현해 놓으면 리액트가 알아서 불러줌

함수 컴포넌트

• 스테이트 없음
• 라이프사이클 메소드 없음
• 한가지 기능을 수행하는 단위
• but 리액트 16버전부터 리액트 훅이라는 것이 도입되어서 함수 컴포넌트 안에서 스테이프, 라이프사이클 메소드도 가질 수 있다
  • 리액트 훅 : 기존 클래스 컴포넌트에서만 할 수 있었던것들을 함수 컴포넌트 안에서도 가능하도록 도와줌

리액트 훅이 도입된 이유

• 클래스가 어렵기 때문
• this 바인딩 이슈 (매번 this. 붙이는건 번거로운 작업임)
• 함수형 프로그래밍의 선호
• 중복 코드(컴포넌트의 마운트, 언마운트, 업데이트 될 때마다)