21.03.30 클래스형 컴포넌트와 함수형 컴포넌트

1. 선언방식 

📌 함수형 컴포넌트

import React from "react";

function App() {
  const name = "react";
  return <div>{name}</div>;
}
export default App;

📌클래스형 컴포넌트 

-class 키워드가 필요하다.

-component로 상속 받아야 한다. 

-render() 메서드가 반드시 필요하다. 

 

class App extends Component {
  render() {
    const name = "react";
    return <div>{name}</div>;
  }
}
export default App;

 

2. 일반적 차이

📌함수형 컴포넌트 

state, lifeCycle 관련 기능을 사용할 수 없다. 👉Hook을 통해 해결 가능

메모리 자원을 클래스형 컴포넌트보다 덜 사용한다. 

컴포넌트 선언이 편하다. 

 

📌클래스형 컴포넌트 

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

메모리 자원을 함수형 컴포넌트보다 더 사용한다. 

임의 메서드를 사용할 수 있다. 

 

3. state 사용 차이  (state : 컴포넌트 내부에서 바뀔 수 있는 값)

📌함수형 컴포넌트 

useState 함수로 state를 사용한다. 

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

const [message, setMessage] = useState('');

📌클래스형 컴포넌트 

constructor 안에서 this.state 초기값 설정 가능

constructor(props){
    super(props);
    this.state = {
        name: [],
        userInput: "",
      };
}

state는 객체 형식으로 설정한다. 

constructor 없이 아래처럼 바로 state 초기값 설정 가능

state = {
    name: [], 
    userInput: "",
};

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

this.setState 함수로 state 값을 변경

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