React Hooks

  React Hooks는 ReactConf 2018에서 발표된 class 없이 state를 사용할 수 있는 새로운 기능입니다. 주로 Class Component로 사용되어온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해 개발되었습니다. React Hooks는 Functional Component를 사용합니다.

 

Class Component VS Functional Componenet

Class Component	Functional Component
더 많은 기능 제공	더 적은 기능 제공(리액트의 생명주기를 사용하지 못함)
더 긴 코드 양	짧은 코드 양
더 복잡한 코드	더 심플한 코드
더딘 성능	더 빠른 성능
import React, { Component } from 'react' export default class Hello extends Component {   render() {     return (       <div>         hello my friends!       </div>     )   } }	import React from 'react' export default function Hello() {   return (     <div>       hello my friends!     </div>   ) }

 

  함수형 컴포넌트에서 더 적은 기능(리액트의 생명주기를 사용하지 못함)을 제공했기에 주로 클래스형 컴포넌트를 사용했습니다. 그러나, React 16.8 Hooks 업데이트로 함수형 컴포넌트에서도 생명주기를 사용할 수 있게 되었습니다.

 

리액트의 생명주기

 

React Hooks

  다음은 생명주기를 이용하는 일반 클래스 컴포넌트와 React Hooks의 코드입니다. React Hooks를 이용한 코드가 더 간결한 것을 볼 수 있습니다. React Hooks 에서는 useEffect() 안에서 모든 것을 처리합니다. 다음 코드에서 [id]를 넘겨주면, [id]가 변경될 때마다 fetchLists가 다시 수행됩니다.

 

  다음은 state를 업데이트 하는 방식의 차이입니다. 오른쪽 코드처럼 React Hooks 에서는 useState()를 이용합니다. 첫번째 인수는 변수 이름이고, 두번째 인수는 state를 업데이트 하는 함수입니다.

 

React Hooks 활용

  HOC(Higher Order Component) 컴포넌트를 Custom React Hooks로 대체하면 수많은 Wrapper 컴포넌트를 줄일 수 있습니다.

 

Note. HOC(Higher Order Component)

  화면에서 재사용 가능한 로직만을 분리해서 component를 만들고, 재사용 불가능한 UI와 같은 다른 부분들은 parameter로 받아서 처리하는 방법입니다.

 

  다음은 HOC와 Custom React Hooks를 이용한 예제 코드입니다. 왼쪽 코드를 보면 사용자 목록(users)을 가져오는 공통적인 부분을 HOC 컴포넌트에 넣어주고, Apage와 Bpage를 감싸주고 있습니다(Wrapper Component). 오른쪽 코드는 Custom React Hooks를 이용해 useAuth()를 만들고, Apage에서는 useAuth()를 통해 사용자 목록을 가져와 사용하는 것을 볼 수 있습니다.

 

  너무나 많은 HOC를 사용하게 되면 Wrapper 컴포넌트가 많아져 코드가 복잡해질 수 있습니다. 이러한 문제는 Custom Hooks를 이용해 해결할 수 있습니다.

 

React Hooks를 이용해 ToDo App을 함수형 컴포넌트로 바꾸기

1. 컴포넌트 변경 (class component > functional component)
2. render() 제거 (functional component에서는 render() 없이 바로 return())
3. state를 useState Hook으로 변경
4. this.state 제거 (this.state.todoData > todoData, this.state.value > value)
5. update state 변경 (this.setState() > setTodoData, setValue)
6. 함수 및 변수 정의 방법 변경 (const 추가 및 this. 제거)

• 소스코드 변경부분

 

 

 

[참고 정보]

인프런- 따라하며 배우는 리액트 A-Z