class component vs functional component

1.리액트가 해왔던 방식

 

FUNCTIONAL COMPONENTS

 

유저에게 컨텐츠를 보여주기 위해 JSX를 생산할 수 있다.

 

CLASS COMPONENTS

 

유저에게 컨텐츠를 보여주기 위해 JSX를 생산할 수 있다.

 

라이프사이클 메서드를 사용할 수 있다.

 

STATE 시스템을 사용할 수 있다.

 

*주의

 

클래스 컴포넌트는 반드시 자바스크립트 클래스여야 한다.

 

반드시 React.Component를 상속받아야 한다.

 

반드시 JSX를 반환하는 render를 정의해야 한다.

 

4. 지금의 리액트

CLASS COMPONENTS에서는 라이프사이클 메써드와 STATE를 사용하지만,

 

FUNCTION COMPONENTS에서는 HOOKS를 사용한다.

 

5.그렇다면 CLASS와  FUNCTIONAL 중 어떤 것을 사용해야 할까?

이미 확립된 ,진행중인프로젝트가 있다면 CLASS, 새로운 프로젝트라면 FUNCTIONAL을 추천한다.

 

6.컴포넌트 라이프 사이클

 

7.STATE의 규칙

1.오직 CLASS COMPONENTS와 사용할 수 있다.

 

2.PROPS WITH STATE와 헷갈릴 수 있다.

 

3.PROPS는 컴포넌트와 관련된 데이터를 포함하는 자바스크립트 오브젝트이다.

 

4.컴포넌트가 만들어질 때 스테이트는 반드시 시작되어야 한다.

 

5.setState로 상태를 업데이트할 수 있다.