[리액트] 함수형 컴포넌트 / 클래스형 컴포넌트

리액트에서 컴포넌트를 선언하는 방식은 두가지가 있다.

 

 

 클래스형 컴포넌트 

 -  상태를 저장할 수 있고(state사용이 가능함), React Life Cycle Method 를 사용할 수 있다.

-  React.Component를 상속받기 때문에 리액트에서 제공하는 기능들을 모두 내것처럼 사용할 수 있다.

-  함수가 아닌 클래스이기 때문에 return문을 사용하지 않는다.

 -  render() 함수가 필수적으로 있어야 한다.( render() 함수를 사용해서 JSX를 반환)

 -  임의의 메서드를 정의할 수 있다.

 -  함수형 컴포넌트가 먼저 나왔기 때문에, 유지보수를 위해 클래스형 컴포넌트를 알아두어야 함

 

 

 함수형 컴포넌트 

 

 -  함수형은 상태를 저장할 수 없다. 기본적으로 함수는 한번 실행되고 나면 메모리 상에서 사라진다. (가비지 컬렉팅)

 -  함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점

 -  함수형 컴포넌트에서만 사용할 수 있는 hooks는 로직을 state와 분리할 수 있게 해주기 때문에 로직을 재사용할 수 있게 해준다.

 -  hooks 는 클로저 원리를 이용해서 state 를 저장한다.

 -  빌드 후 배포시에 결과물의 크기가 작다.

 - return문을 사용해서 JSX를 반환