[React] React Hooks

1- React Hooks란?

React Hooks란 ReactConf 2018에서 발표된 class 없이 state를 사용할 수 있는 새로운 기능이다. React Hooks 는 Class Component로 사용된 React에서 느낀 불편함과 문제점을 개선하기 위해 개발되었다.

 

1. 이전방식 (Class Component)

import React, { Component } from 'react'

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

• 더 많은 기능 제공
• 더 긴 코드 양
• 더 복잡한 코드
• 더딘 성능

2. React Hooks (Functional Component)

import React from 'react'

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

• 더 적은 기능 제공
• 짧은 코드 양
• 더 심플한 코드
• 더 빠른 성능

함수형 컴포넌트는 클래스형 컴포넌트에 비해 더 적은 기능을 제공해왔다. 바로 리액트 생명주기를 사용할 수 없었기 때문에 다른 장점에도 불구하고 클래스형 컴포넌트를 써왔다.

 

리액트 생명주기란? https://anna-in-workplace.tistory.com/37

[React.js] Component LifeCycle Method

그러나 React 16.8 Hooks 업데이트로 변경되었다. 따라서 함수형 컴포넌트에서도 생명주기를 사용할 수 있기에 데이터를 가져오고 컴포넌트를 시작하자마자 API를 호출하는 등 이전의 클래스형 컴포넌트에서만 가능한 기능들이 추가되었다.

 

- 클래스형 컴포넌트 

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

 

- 함수형 컴포넌트 

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 {this.state.name}
		</div>
	)
}

 

2- React Hooks를 이용한 생명주기를 이용하면 코드가 훨씬 간결해진다.

- 일반 클래스 컴포넌트에서 생명주기 사용

componentDidMount() {
	// 컴포넌트가 마운트되면 updateLists 함수를 호출 
	this.updateLists(this.props.id)
}

componentDidUpdate(prevProps) {
	if (prevProps.id !== this.props.id) {
		// updateLists 함수를 호출할 때
		// 사용되는 id가 달라지면 호출 
		this.updateLists(this.props.id)
	}
}

// updataLists 함수 정의
updataLists = (id) => {
	fetchLists(id)
			.then((lists) => this.setState({
				lists
		}))
}

 

- React Hooks 를 이용한 생명주기 이용 

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

Class Component에서는 생명주기를 이용할 때 componentDidMount와 ComponentDidUpdate 그리고 componentWillUnmount를 다르게 처리해주지만, hooks 를 사용할 때는 useEffect안에서 다 처리를 할 수 있다.

 

3- HOC 컴포넌트를 Custom React Hooks로 대체해서 많은 Wrapper 컴포넌트를 줄일 수 있다.

HOC(Higher Order Component)란?

화면에서 재사용 가능한 로직만을 분리해서 component로 만들고, 재사용 불가능한 UI와 같은 다른 부분들을 parameter로 받아서 처리하는 방법이다. (컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수이다.)

 

1. HOC를 적용하지 않음 

export default class Apage extends Component {
	
	state = {
		user: []
	}

	componentDidMount() {
		fetchUsers()
				.then(users => {
					this.setState({ users })
				})
	}

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

export default class Bpage extends Component {
	
	state = {
		user: []
	}

	componentDidMount() {
		fetchUsers()
				.then(users => {
					this.setState({ users })
				})
	}

render() {
	const { user } = this.state;
	return (
		<div>
			B 페이지
			{users.map(({name, url}) => (
				<div key={name}>
					<p>{name}, {url}</p>
				</div>
			))}
		</div>
		)
	}
}

A 페이지와 B 페이지에서 유저 리스트를 가져오는 부분은 같은 소스를 사용한다. 모든 페이지에서 유저 리스트를 가져오기 위해서 똑같은 소스를 넣어준다면 너무 많은 중복이 되기 때문에 중복이 되는 부분은 따로 HOC 컴포넌트를 만들어준다.

 

2. HOC 적용

function usersHOC(Component) {
	return class usersHOC extends React, Component {
		
		state = {
			users: []
		}

		componentDidMount() {
			fetchUsers()
					.then(users => {
						this.setState({ users })
					})
		}

		render() {
			return (
				<Component
					{...this.props}
					{...this.state}
				/>
			)
		}
	}
}

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

export default usersHOC(Apage)

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

export default usersHOC(Bpage)

유저 리스트를 가져오는 공통적인 부분은 HOC 컴포넌트에 넣어주고 그 HOC 컴포넌트로 각각의 컴포넌트를 감싸주면 모든 컴포넌트에 따로 인증을 위한 부분은 넣어주지 않아도 된다. 그러나 이 방법은 너무나 많은 Wrapper 컴포넌트가 생길 수 있다는 것이다.

<LanguageHOC>
	<ThemaHOC>
		<AuthHOC>
			<Apage />
		</AuthHOC>
	</ThemaHOC>
</LanguageHOC>

 

3. Custom React Hooks

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

function Apage() {
	const [users] = useAuth(); // Wrapper가 너무 많아지는 문제 해결 

	return (
		<div>
			A 페이지
			{users.map( ({name, url}) => (
				<div key={name}>
					<p>{name}, {url}</p>
				</div>
			))}
		</div>
	);
}

 

Class 컴포넌트 대신 함수형 컴포넌트를 사용하면

• 더 짧고 간결한 코드
• 더 빠른 성능
• 더 나은 가독성 을 얻을 수 있다.