React - React Hook

React vs React Hook

Class Component

- 많은 기능들을 제공

- 대신 코드가 길어지고 복잡해짐

- 성능이 상대적으로 낮음

import React, { Component } from "react"

export default calss hi extends Component {
  render() {
    return (
     <div>
       hi lee!
     </div>
  )
 }
}

Functional Component

 

- 한정된 기능들을 제공

- 대신 코드가 간단해짐

- 성능이 상대적으로 높음

import React, { Component } from "react"

export default function hi() {
  return ( 
   <div> 
     hi lee!
   </div>
  )
}

life cycle

 

import React, { Component } from "react"
import Axios from 'axios'

export default class hello extends component {

 constructor(props)  // 1. 먼저 생성자가  실행된다
 {
    super(props);
    this.state = { name: ""};
 }

componentDidMount() { // 3.Mount를 하여 Data를 가져옴
  Axios.get('api/user/name')
   .then(response => {
     this.setState({ name: response.data.name })
  })
}

render() { // 2. 렌더링을 해줌
 return (
   <div>
     hi {this.state.name} !
   </div>
  )
 }
}