[TIL][React]Functional Component -1

Bohyeon Koo·2021년 1월 24일
0

React

목록 보기
4/7
post-thumbnail

Class vs Function

리액트는 두가지 방법으로 컴포넌트를 만든다.

기존 리액트에서
클래스형 컴포넌트는 리액트의 기능을 강력하게 사용할 수 있지만,
클래스라는 문법 자체를 알아야 했으며 이는 쉽지 않았으며

함수형 컴포넌트는 함수 문법만 알면 사용할 수 있었지만
기능이 부족했다.

기능이 부족하다는 표현에는 이러한 점들이 있었다.

  • 클래스형의 컴포넌트 내부에서의 state 사용과 같은 것을 사용할 수 없었다.
  • Life Cycle API 또한 사용할 수 없었다.
  • 그러므로 함수형은 상위 컴포넌트의 일만 처리하는 단순함을 가졌었다.

하지만 최신 리액트에서 그가 등장한다. 바로 HOOK!
훅의 등장으로 함수 방식에서도 내부에서 상태를 다루며,
컴포넌트의 라이프사이클에 따라서 해야 할 작업을 정리할 수 있게 되었다.

Functional 에서의 Render

함수형 컴포넌트에서의 렌더링은
클래스형 컴포넌트 방식에서의 렌더 함수 호출은 필요가 없다.
함수형 컴포넌트는 자기 자신이 곧 렌더 함수 인 것이다.

function FuncComponent(){
return (
	<div className="forExample">
    	<title>function style component</title>
    </div>
   );
}

0개의 댓글