React Hooks

class 없이 state를 사용할 수 있는 기능이다. 

React는 원래 Class Component를 사용하고 React Hooks는 Functional Component를 사용한다. 

React Component

1. Class Component: 더 많은 기능, 더 긴 코드, 더 복잡한 코드, 더딘 성능

import React, { Component } from 'react'

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

2. Functional Component: 더 적은 기능, 짧은 코드, 더 심플한 코드, 더 빠른 성능

import React from 'react'

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

이전에는 React의 생명주기 Mounting -> Updating -> Unmounting을 함수형 컴포넌트에서 사용을 못했었다. 대신 느리고 복잡한 클래스형 컴포넌트를 사용해야했는데

 

이전이 이랫는데 

React Hooks로 업데이트되면서 

함수형 컴포넌트에서도 생명주기를 사용할수 있게되었다. 그래서 컴포넌트가 시작될때 API호출이 가능해지며 많은 부분이 사용가능해졌다. 

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

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>
        }
    }
}

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>
    }
}

 

 

아래 코드를 보면 똑같은 소스코드다. 

위에것은 일반 클래스 컴포넌트에서 생명주기를 사용한거고

아래것은 React Hooks를 이용한 생명주기다. 

componentDidMount() {}
	// 컴포넌트가 마운트 되면 updateLists 함수를 호출
    this.updateLists(this.props.id)
}
componentDidUpdate(prevProps) {
	if (prevProps.id !== this.props.id) {
    	// updateLists 함수를 호출할 때 
        // 사용되는 id가 달라지면 다시 호출
        this.updateLists(this.props.id)
    }
}
// updateLists 함수 정의
updateLists = (id) => {
	fetchLists(id)
    	.then((Lists) => this.setState({
        	lists
        }))
}

useEffect(() => {
	fetchLists(id)
    	.then((repos) => {
        	setRepos(repos)
        })
}, [id])

 

# HOC 컴포넌트를 Custom React Hooks로 변경해 Wrapper 컴포넌트를 줄인다.

HOC(Higher Order Component) - 화면에서 재사용 가능한 로직으로 component를 생성하고 재사용이 불가능한 UI와 같은 부분은 parameter로 받아서 처리해준다.

export default class Apage extends Component {

	state = {
    	user: []
    }
    
    componentDidMount() {
    	fetchUsers()
        	.then(users => {
            	this.setState({ users })
            })
    }
    
    render() {
    	const { users } = this.state;
        return {
       		<div>
            	A 페이지
                {users.map(({ name, url }) => (
                	<div key={name}>
                    	<p>{name}. {url}</p>
                    </div>
                })}
            </div>
        }
    }
}

export default class Bpage extneds Component {
	
    state = {
    	user: []
    }
    
    componentDidMount() {
    	fetchUsers()
        	.then(users => {
            	this.setState({ users })
            })
    }
    
    render() {
    	const { users } = this.state;
        return {
        	<div>
            	B 페이지
                {users.map(({ name, url }) => (
                	<div key={name}>
                    	<p>{name}, {url}</p>
                    </div>   
                ))}
            </div>
        )
    }
}

 

Wrapper가 너무 많아지면 데이터 흐름을 파악하기 어려운데  Custom React Hook를 이용해 이런식으로 변경해줄 수 있다. 

function usersHOC(Component) {
	return class usersHOC extends React.Component {
    	
        state = {
        	users: []
        }
        
        componentDidMount() {
        	fetchUsers()
            	.then(users => {
                	this.setState({ users })
                })
        }
    }
}

function Apage ({users}) {
	// ...
}

export default usersHOC(Apage)

function Bpage({users}) {
	// ...
}

export default usersHOC(Bpage)

-> 

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

function Apage() {
	
    const [users] = useAuth();
    
    return (
    	<div>
        	A 페이지
            {users.map(({ name, url }) => (
            	<div key={name}>
                	<p>{name}, {url}</p>
                </div>
            ))}
        </div>
    );
}

함수형 컴포넌트가 간결하고 성능도 좋다.