[React] 클래스형 컴포넌트와 함수형 컴포넌트

클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해 알아보자

 

1. 선언방식의 차이

클래스형

1. class 키워드가 필요하다.

2. Component로 상속을 받아야 한다.

3. render() 메소드가 반드시 필요하다.

4. state, lifeCycle 관련 기능사용이 가능하다.

5. 함수형보다 메모리자원을 더 많이 사용한다.

6. 임의 메소드를 정의할 수 있다.

 

함수형

1. state, lifeCycle 관련 기능사용이 불가능하고 hook을 통해 연결된다.

2. 클래스형보다 메모리 자원을 덜 사용한다.

3. 컴포넌트 선언이 편리하다.

 

2. state의 차이

state란 컴포넌트 내부에서 바뀔 수 있는 값이다.

 

클래스형

1. constructor 안에서 this.state로 초기값 설정이 가능하다.

2. constructor 없이도 state 초기값을 설정 가능하다.

3. this.setState()를 통해 state값을 변경한다.

4. 클래스형의 state는 객체형식이다.

 

함수형

1. useState 함수로 state를 사용한다.

2. useState 함수를 호출하면 배열이 반환되는데 첫번째 원소는 현재상태, 두번째 원소는 상태를 바꿔주는 함수이다.

 

3. props

props란 컴포넌트의 속성을 설정하고 읽기 전용이며 모든 리액트 컴포넌트는 자신의 props를 다룰 때 순수 함수처럼 동작해야 한다.

 

클래스형

1. this.props를 통해 값을 불러올 수 있다.

 

함수형 

1.props를 불러올 필요 없이 바로 호출할 수 있다.

 

4.이벤트 핸들링

 

클래스형

1. 함수 선언시 화살표 함수로 바로 선언 가능하다.

2. 요소에 적용할때 this. 를 붙여줘야 한다.

 

함수형

1. const + 함수 형태로 선언해야 한다.

2. 요소에 적용할때 this가 필요 없다.