[React] React Hook

리액트 컴포넌트는 두가지 방식으로 작성할 수 있다.

Class Component	Functional Component
많은 기능 제공	적은 기능 제공
긴 코드	짧은 코드
복잡함	심플함
느린 성능	빠른 성능

Class Component

import React, { Component } from 'react'

export default class Hello extends Component {
	render(){
    	return (
        	<div>
            	hello my friends!
            <div>
        )
    }
}

Functional Component

import React from 'react'

export default function Hello() {
	return (
    	<div>
        	hello my friends!
        </div>
    )
}

그러나 표에도 적혀있듯이 함수형 컴포넌트는 클래스 컴포넌트보다 더 적은 기능을 제공하는데 그 중 하나가 lifecycles 이였다.

그러나 리액트 훅의 등장으로 함수형 컴포넌트에서도 lifecycles을 사용할 수 있게 되었다.

 

React Hook 적용

기존 클래스 컴포넌트

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

export default class Hello extends Component {
	
    constructor(props) {
    	super(props);
        this.state = { name: "" }
    }
    
    componentDidMount(){
    	Axios.get('/api/user/name')
        	.then(response => {
            	this.setState({name: response.data.name})
            })
    }
    
    render() {
    	return (
          <div>
            My Name is {this.state.name}
          </div>
        )
    }
}

React Hook 적용한 함수형 컴포넌트

import React, { useEffect, useState } from 'react'
import Axios from 'axios'

export default function Hello() {
	const [Name, setName] = useState("")
    
    useEffect(() => {
    	Axios.get('/api/user/name')
        	.then(response => {
            	setName(response.data.name)
            })
    }, [])
    
    return (
    	<div>
        	My name is {Name}
        </div>
    )
}

 

 

참고

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본 강의