Class Component 와 Functional Component

react 컴포넌트를 선언하는 방식에는 2가지 방식이 있다
1. Class Components
2. Functional Components

Class Components

import React, {Component} from 'react';

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

export default App;

class라는 키워드를 통해서 Component로 상속을 받아야 하며 render() 메소드가 반드시 있어야 한다. 또 state와 Life Cycle를 사용할 수 있다. 그리고 state를 constructor 안에서 this.state 초기 값 설정 가능하다. constructor 없이 바로 state 초기값을 설정할 수 있고 class components의 statte는 객체 형식이다. this.setState 함수로 state의 값을 변경할 수 있다.

---

Functional Components

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

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

export default App;

functional components는 state, lifeCycle 관련 기능사용 불가능하다 하지만 이 부분은 Hook을 통해서 해결이 가능하다. 무엇보다도 class components보다 선언이 훨씬 편하다.

const [value, setValue] = useState("")

functional components에서는 useState를 통해서 state를 사용할 수 있다. useState 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꾸어 주는 함수를 반환한다. useState의 () 안에는 초기값을 넣어주며 이 값은 value로 들어간다.

setValue("철수")

setValue를 통해서 value의 값을 새로운 값은 철수로 상태를 변경시켜준다.