React Hooks

: class 없이 state를 사용 가능한 새로운 기능

필요한 이유

class vs functional

<클래스>

더 많은 기능 제공

더 긴 코드 양

더 복잡한 코드

더딘 성능

<함수>

더 적은 기능 제공

짧은 코드 양

더 심플한 코드

더 빠른 성능

=> 간결하고 빠른 성능을 자랑하지만 많은 기능 보유면에서는 클래스형이 더 좋다

리액트 생명주기는 크게 3가지, mounting, update, unmounting으로 구성

이러한 생명주기는 함수형 컴포넌트에서는 적용을 못했다

=> 함수형 컴포넌트는 class형보다 더 적은 기능과 리액트 생명주기 관련하여 사용을 못해 클래스형 컴포넌트로 사용해왔다

But Hooks의 등장

함수형 컴포넌트에서도 생명주기 사용 가능

데이터 가져오기, 로드 시 API 호출 및 많은 동작들 가능

---

기존 클래스형으로 변수 선언 및 할당은 생성자로,

로드시 호출위한 함수 componentDidMount()로 axios 활용한 데이터 get요청이 이루어지고,

state로 해당 속성에 대한 값을 업데이트하는 방식

하지만 함수형으로 React에서 제공되는 useState기능 적용함으로써

코드가 간결해지고, state에 대한 가리키는 변수명이 더 직관해지는 효과가 생겼다

useEffect라는 함수로 componentDidMount()함수의 기능을 대신해주는 구조도 이루어진다

hooks의 장점

1. 생명주기 관리

기존 클래스형 컴포넌트는 리액트 생명주기에 따라

componentDidMount, componentDidUpdate, componentWillUnMount로

로드 시 호출, 업데이트, 호출 정지를 분리해서 사용했지만

useEffect를 사용함으로써 이 3가지를 한번에 가능해졌다

이는 코드가 훨씬 간결해지는 효과를 볼 수 있다

2. 컴포넌트 관리

HOC 컴포넌트 -> Custom React Hooks로 Wrapper 컴포넌트 감소

*HOC

Highter Order Component, 컴포넌트를 인자로 받아 새로운 리액트 컴포넌트를 리턴하는 함수

화면에서 재사용 가능한 로직만을 분리해서 컴포넌트로 만들고, 재사용 불가능한 UI와 같은 다른 부분들은 파라미터로 받아서 처리하는 방법

A와 B페이지를 보면 같은 소스 사용하는 것을 확인 -> 유저 리스트 가져오는 부분

따라서 공통적인 부분은 HOC 컴포넌트에 넣어주고, 각각의 컴포넌트를 감싸주는 구조

하지만 이는 너무나 많은 Wrapper 컴포넌트가 생기는 문제점 발생

이렇게 Hooks에 대해서 Custom을 함으로써 무분별한 Wrapper 컴포넌트 생성 필요성 없어짐