[React] React Hooks

React Hooks란?

React hooks는 state를 사용하는 기능이다. 기존에는 class를 활용하여 constructor를 활용해 state를 관리했다. 하지만 불편한 점들이 많아 react hooks가 등장했다.

import React, {useState} from 'react'

function Count() {
	const [count, setCount] = useState(0)
    
    return (
    	<div>
        	<p>클릭한 횟수:{count}</p>
            <button onClik={()=> setCount(count+1)}></button>
        </div>
    );
}

기존 class에서 작성되던 것들 중 일부를 바꿔도 상관없도록 호환성이 좋기 때문에 혼합하여 사용 가능하다.

componentDidMount, componentDidUpdate, componentWillUnmount는 원래 class에서만 사용하던 것이었다.
첫번째 함수는 웹페이지가 처음 렌더링 될 경우 실행되는 함수이다. 두번째 함수는 새로운 props가 들어오거나 setState()를 통해서 state가 업데이트 될 경우와 forceUpdate() 즉, 강제 업데이트가 될경우 발생한다.
세번째 함수는 더이상 함수를 사용하지 않을 경우 반환하는 역할을 한다.

이러한 함수를 사용하던 class 컴포넌트와는 다르게 함수형 컴포넌트에서는 useEffect와 useState라는 Hooks를 사용하여 간결하게 나타낼 수 있다.

Class 컴포넌트

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

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

함수형 컴포넌트

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

export default function UserFunction() {
	const [Username, setUsername] = useState("")
    
    useEffect(()=> {
    	Axios.get('/api/user/name')
        	.then(res=> {setUsername(res.data.name)})
    },[])
    
    render() {
    	return (
        	<div>
            	My name is {Username}
            </div>
        )
    }

함수형 컴포넌트의 메리트는 이뿐만이 아니다. 커스텀 Hooks를 통해 반복되는 로직을 다룰 수 있다.

function useAuth() {
	const [users,setUsers] = useState([]);
    
    useEffect(() => {
    	axiosUsers().then(users => {
        	setUsers(users)
        })
    },[])
    
    return [users]
}

function Newpage() {
	const [users] = useAuth();
    
    return (
    	new page
        {users.map(({ name, url }) => (
        	<div key={name}>
            	<p>{name}, {url}</p>
            </div>
        
        ))}
    )
}