[React] Hooks

 

01. React Hooks란?

. 2018 React Conf에서 처음 소개되어 React v16.8에 도입된 기술

. 함수형 컴포넌트에서 state관리와 Life cycle을 다룰 수 있게 해주는 기술

. React Hooks 종류: useState(), useEffect(), useMemo(), useContext(), useRef(), useCallback() ...

 

 

📝 Life Cycle

. Mount 그리고 Update, Unmount 3가지의 Life Cycle이 있다.

① Mount

. 처음 컴포넌트가 생성되고 렌더링을 거치는 과정 

② Update

. props 혹은 state가 변경될 때, forceUpdate()가 실행되었을 때 리렌더링 하는 과정 

③ Unmount

. 컴포넌트가 종료되는 과정

 

---

 

02. Hooks의 등장 배경

. 기존의 리액트는 클래스 컴포넌트를 기반으로 작업했다. → 컴포넌트 기반의 불편한점 존재

 

(1) 컴포넌트 기반의 문제점

① this

. this는 클래스 자신을 가리킴

. this가 가리키는 값은 변경될 수 있다.

. 변경될 수 있기 때문에 문제가 발생한다.  

 

❓예시

→ 위쪽에서 사용자를 변경할 수 있고, 아래쪽 팔로우 버튼을 누르면 3초뒤에 현재 유저를 팔로우하게 된다.

→ 팔로우 버튼을 누르고 3초 안에 유저를 바꾼다면?

→ 바뀐 유저를 팔로우하게 된다!

 

⚠️ 즉, 현재 선택된 룩소 유저를 팔로우하려고 했으나, 바뀐 유저가 팔로우되는 문제가 발생하는 것!

→ 컴포넌트가 리렌더링되면서 this가 가리키는 값이 변경되었기 때문

→ 고정되지 않은 this로 인해 발생한 버그

→ this사용은 어렵다. 

 

② 재사용성

. 클래스 컴포넌트에서 상태로직을 재상요하기는 쉽지않다.

. HOC 패턴과 같은 방법으로 해결 → 하지만, HOC에는 또 다른 문제가 발생함.

 

 

📝 HOC(Higher Order Component)란?

. 화면에서 재사용 가능한 로직을 분리해서 컴포넌트로 만들고, 재사용 불가능한 부분은 parameter 로 받아서 처리하는 방법

 

❓ 예시

. 아래 두 컴포넌트는 유저를 fetching 하는 부분이 아에 똑같다.

 

✨ 이걸 HOC를 적용한다면?

. HOC에 중복된 코드들을 넣고, 사용할 컴포넌트를 함수의 인자로 받는다.

. 인자로 받은 컴포넌트를 render()에 넣어서 컴포넌트의 props로 유저 state를 전달한다. 

 

. 각 페이지에서는 이런 userHOC 고차 컴포넌트를 감싸서 사용하면 된다.

 

⚠️ "Wrapper 지옥" 문제 존재

. 사용하는 로직이 많아져서 고차 컴포넌트가 계속 감싸지게 되면, Wrapper 지옥에 빠지게 된다.

 

③ 그 외

. 떨어지는 가독성

. 낮은 성능 등등...

 

(3) Hooks의 등장 전/후

🅱️ 등장 전

. 사실 함수형 컴포넌트가 있긴 했지만, 기능이 너무 적었다. 

. 그냥 props를 받아서 렌더링 하는 기능만 가지고 있었다.

 

🅰️ 등장 후

. 함수형 컴포넌트에서도 상태관리/생명주기 기능 가능 

. 함수의 장점도 갖고 있음

 

---

 

03. Hooks의 이점

① 더 깔끔하고 간단한 코드

. 초기값이 0인 count 상태 선언

. 버튼을 누르면 count + 1

→ 깔끔해진 코드 & this로부터의 문제도 해결

 

→ LifeCycle 함수가 3가지에서 useEffect() 하나로 사용 가능해짐.

 

② 재사용성

. 클래스 컴포넌트에서 상태 로직을 재사용하기는 어렵다. → HOC 패턴을 활용해서 로직을 재사용할 수 있다. 하지만, Wrapper 지옥에 빠질 수 있다.

. 함수형 컴포넌트에서는 Custom Hook을 통해 재사용성 문제를 해결할 수 있다.

 

📝 Custom Hooks

. 개발자가 스스로 커스텀한 훅을 의미하며, 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다.

✔️ 장점

   ① 상태관리 로직의 재활용이 가능하다

   ② 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있다.

   ③ 함수형으로 작성하기 떄문에 보다 명료하다. ( ex. useSomething)

✔️ 규칙

   ① Custom Hook을 정의할 때는 함수 이름 앞에 use를 붙이는 것이 규칙이다.

       (만약 use를 안붙이면 일반 함수로 인식하기 때문)

   ② 대개의 경우 프로젝트 내의 hooks 디렉토리(혹은  utils)에 Custom Hook을 위치시킨다.

   ③ Custom Hook으로 만들 때 함수는 조건부 함수가 아니어야 한다. 즉 return 하는 값은 조건부여서는 안된다.

 

---

 

📌출처