• React Hooks란?
  • React Hooks의 개발 배경
    • React 16.8 Hooks 업데이트
    • React Hooks를 쓰면..
  • 정리

React Hooks란?

React Hooks는 reactConf 2018에서 발표된, class 없이 state를 사용할 수 있는 새로운 기능이다.

React Hooks의 개발 배경

React Hooks는 주로 Class Component로 사용되어 온 React에서 느껴왔던 불편함이나 문제점을 해겨하기 위해서 개발되었다.

리액트 컴포넌트
Class Component	Functional Component
더 많은 기능 제공	더 적은 기능 제공
더 긴 코드 양	짧은 코드양
더 복잡한 코드	더 심플한 코드
더딘 성능	더 빠른 성능

함수형 컴포넌트가 클래스 컴포넌트에 비해서 모자란점 “리액트 생명 주기”를 사용하지 못함, 따라서 함수형 컴포넌트의 장점을 살리지 못하고 클래스 컴포넌트가 널리 사용되었다.

React 16.8 Hooks 업데이트

이 업데이트로부터 함수형 컴포넌트에서도 생명주기를 사용할 수 있게 되어 데이터를 가져오고 컴포넌트 시작하자마자 API도 호출하고 많은 부분들을 해소할 수 있게 되었다.

React Hooks를 쓰면..

1. 간결한 코드

Class Component에서 각각

• componentDidMount
• componentDidUpdate
• componentWillUnmount 를 다르게 처리해주지만 React Hooks 에서는 useEffect 안에서 다 처리해줄 수 있다.

2. HOC 컴포넌트를 Custom React Hooks로 대체해서 Wrapper 컴포넌트 감소

HOC(Higher Order Component) : 화면에서 재사용 가능한 로직만 분리해서 component로 만들고, 재사용 불가능한 UI와 같은 다른 부분들은 parameter로 받아서 처리하는 방법

HOC 컴포넌트를 활용하면 중복되는 것들을 감소시켜줄 수 있으나, wrapper 컴포넌트가 증가한다는 단점이 있다. 하지만 Custom React Hooks를 이용한다면 이 Wrapper를 사용하지 않고 중복되는 코드들에 대한 대응을 가능하게 한다.

Babel 실행 시 더 간결한 코드 클래스 컴포넌트에 비해서 함수형 컴포넌트를 바벨화 하였을 때, 코드가 훨씬 더 간결하다.

정리

1. 더 짧고 간결한 코드
2. 더 빠른 성능
3. 더 나은 가독