React 클래스형과 함수형 컴포넌트 차이점

리액트를 처음 공부할 때 클래스형으로 배웠는데,

요즘 리액트 공식사이트에서도 함수형 컴포넌트 훅(hook)을 지원해주면서 

함수형과 훅(hook)을 함께 사용할 것을 권장하고 있다고 합니다! 

 

다만, 클래스형은 이전에 작업한 부분에 대해 유지보수를 하기 위한 용도로 알아두면 좋으니

같이 공부를 해봅시당!

 

 

React 클래스형과 함수형 컴포넌트 차이점 

No	클래스형 컴포넌트	함수형 컴포넌트
선언의 차이	- class 키워드 필요  - Component로 상속을 받아야하며, render 메소드가 반드시 필요함 - state,lifeCycle 기능 사용이 가능	- state,lifeCycle 관련 기능 사용 불가능 - 컴포넌트 선언이 용이함
state	- constructor 안에서 this.state 초기값 설정 - constructor 없이도 바로 state 초기값을 설정 가능 - this.setState()를 통해 state값을 변경  - 컴포넌트의 state는 객체형식	- useState 함수로 state 사용  - useState 함수를 호출하면 배열이 반환되는데 첫번째 원소는 현재상태, 두번째 원소는 상태를 바꿔주는 함수 !
props	- this.props로 값을 불러올 수 있음	- props를 불러욜 필요 없이 바로 호출이 가능

 

---

1. 선언의 차이 

•  클래스형 컴포넌트 

- class 키워드가 필수로 들어가며, Componnent로 상속을 받아야 합니다

- render 메소드가 반.드.시 있어야함

import React,{Component} from 'react';

class App extends Component {
   render() {
     const name = "또깽이 소소하고 행복한 공간";
     return <div className="react">{name}</div>
   }
}

export default App;

함수형 컴포넌트

import React from 'react';
import './App.css';

function App() {
  const name = '또깽이의 소소하고 행복한 공간';
  return <div className = "react">{name}</div>
}

export default App;

---

2. state 

state란? 컴포넌트 내부에서 바뀔 수 있는 값 ! 

 

클래스형 - 컴포넌트의 state는 객체형식 

this.state = { monsters: [], userInput: "", };

클래스형 - this.setState()를 통해 state값을 변경 

onClick = {() => {
   this.setState({number: number * 1});
}}

 

함수형 - setState 함수로 state의 값을 변경

const [number, setnumber] = useState('');

---

3. props

클래스형 - this.props로 값을 불러 올 수 있다 !

class MyComponent extends Component {
   render() {
      const {name, habit} = this.props;
      return (
         <div>
            이릉은 {name} 입니다. <br/>
            나의 취미는 {habit} 입니다.
         </div>
      )
   }
}

 

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

const MyProps = ({ name, habit}) => {

  return (
     <div> 
        안녕하세요, 제 이름은 {name} 입니다.
        나의 취미는 {habit} 입니다.
      </div>
  );
}

 

 

결론, 

클래스형은 render함수를 사용해서 렌더링을하며, state값을 사용할 때 constructor함수에서 this.state로 초기값 설정이 가능합니다. state를 업데이트 하기 위해서는 this.setState를 사용합니다. props를 조회하거나 이벤트 핸들링 할 때 this를 사용할 수 있습니다. 또한, lifecycle 메소드를 가지고 사용할 수 있습니다.

함수형은 리액트 hooks 중 useState 를 사용하여 state 값을 업데이트하거나 props와 이벤트 헨들링에 this가 필요하지 않습니다. 또한, lifecycle도 useEffect 라는 hooks를 사용합니다.

 

 

 

참고자료 

https://born-dev.tistory.com/27

https://koras02.tistory.com/m/177