React/기초

리액트[기초] 클래스형 컴포넌트, 함수형 컴포넌트

뿌비 2022. 5. 26. 22:49
728x90

컴포넌트를 선언하는 방식에는  클래스형 컴포넌트함수형 컴포넌트가 있다 

▷  리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수 컴포넌트와 Hooks를 사용하도록 권장하고 있다 

 차의점
클래스형 컴포넌트 함수형 컴포넌트
state 기능 및 라이프 사이클 기능 사용 가능  [장점] 선언 하기 훨씬 편리하고 메모리 자원도 덜 사용하기 때문에 프로젝트를 완성하고 빌드 한 후 배포 할 때도 함수형 컴포넌트를 사용하는 것이  결과물의 파일 크기가 더 작다 

[단점] state 과 라이프 사이클 API 사용이 불가능 (리액트 v16.8 이후에는 Hooks 기능이 도입 되면서  다른방식으로 비슷하게 사용가능)
임의 메서드를 정의 할 수 있다 
render 함수가 꼭 있어야하고 그 안에서 보여주어야 할 JSX를 반환 해야한다

 

728x90