[TIL]0218_react hooks 공부 ing

HOOKS

• 클래스를 사용하지 않고도, 함수 컴포넌트에서 상태 및 다른 react의 기능들을 사용할수있도록 만들어주는, React의 새로운 기능이자, 컨셉.

• 함수 컴포넌트에서, React state와 생명주기 기능(life cycle features)을 연동(hook into)할수있게
  해주는 함수.

• class컴포넌트안에서는 동작 x.
  class 없이 React가 동작할수있도록 고안된 컨셉이기 때문!

• useState같은 내장 Hook을 지원. 컴포넌트간에 상태 관련 로직을 재사용 하기위해 Hook을 '직접' 만드는것도 가능.

• React 16.8에 새로 추가된 기능. 즉, 이 버전이 최초 Hook 배포버전인 거다.

HOOKS의 특징

• 선택적 사용
  : 기존의 코드를 다시 작성할 필요가 없이,
  일부의 컴포넌트들 안에서 Hook을 사용할수가 있다.
  만약 당장 Hook이 필요없다면, 굳이 hook을 사용할필요는 없다.
  

• 100% 이전버전과의 호환성
  : Hook은 호환성을 깨뜨리는 변화가 없다.
• 현재 사용가능
  : Hook은 v16.8.0에서 사용할수있다.

2. React에서 Class를 제거할 계획은 없다!
   미래에도 계속 Class 컴포넌트들을 지원할 예정.

   => Hook의 점진적 적용 전략.
   React 개발자들이 사용하는 API에 초점을 맞추고,
   새롭게 출시되는 모든 API에 투자할 시간이 없다는걸 일단 알고있고,

   기존코드 리팩토링 생각은 전혀없고,
   새로운 코드에서 기존 코드와 나란히 Hook을 사용할 계획.
   

3. Hook은 알고 있는 React 컨셉을 대체하지 않는다.
   => 대신에, Hook은 props, state, context, refs, 그리고 lifecycle와 같은 React 개념에 좀 더 직관적인 API를 제공한다.
   또한 Hook은 이 개념들을 엮기 위해 새로운 강력한 방법을 제공한다.

HOOKS의 동기

1. React는, 컴포넌트 사이에서 '상태와 관련된 로직'을 '재사용하기 어렵다.😥

그리고, 컴포넌트에 '재사용 가능한 액션을 붙이는 방법'을 '제공하지 않는다.'❌

(ex) 스토어에 컴포넌트를 연결하는 것)

Before....
만약 이전부터 React를 사용해왔다면,
이것을 해결하기 위해 render props 그리고 고차 컴포넌트와 같은 패턴에 우리는 익숙해야했다.
하지만 이 패턴은, 컴포넌트를 재구성해야함 + 코드 유지보수성 ↓ 였다.
전형적인 React 애플리케이션은, providers, consumers, 고차 컴포넌트, render props
그리고 다른 추상화에 대한 레이어로 둘러싸인 “래퍼 지옥(wrapper hell)“을 자주 보는데,
개발자 도구에서 걸러낼 수 있지만, 요점은 더 깊은 문제다.
따라서 React는 '상태 관련 로직을 공유하기 위해 좀 더 좋은 기초 요소가 필요'했다.

=> Hook을 사용하면
(1). '컴포넌트로부터 상태 관련 로직을 추상화' 할 수 있다.
- 이것은 '독립적인 테스트',그리고 '계층 변화 없이 상태 관련 로직을 재사용' 할수있다.
그러니까 많은 컴포넌트 사이에서 Hook 공유하기가 쉽다.

2. 복잡한 컴포넌트들은 이해하기 어렵다....

Before....
기존에는, 유지하기 힘든 상태관련로직 들과 side effect가 있는 컴포넌트들을
유지해야 해서 힘들었다.
그리고, 각 life cycle 메소드들(componentDIdMount(), componentDidUpdate() )은 자주 관련없는 이벤트핸들러등의 로직이 섞여있다.
-> 이는 잠재적으로 버그를 일으키거나, 무결성을 쉽게 해친다.

  위 같은 경우에, 상태관련 로직들이 전역에 있기때문에, 컴포넌트들을 잘게 쪼개는일이
   불가능했다. 그래서 별도의 React 상태관리 라이브러리와 함께 사용하곤 했다.
   근데 얘도 이제 문제가 있다. 너무많은 추상화를 시키고, 컴포넌트 재사용을 더 요구했다한다.
   (나는 사용안해봤지만...)

=> Hook을 사용하면
(2). 생명주기 메소드들을 기반으로, '로직을 쪼개는데 초점을 맞추지 않도록' ❌
'Hook을 이용해서 로직에 기반을 둔 함수'가 '기준'이 돼어 , ⭕
... 컴포넌트들을 나눌수 있게되었다.

2. Class는, 사람과 기계를 혼동시킨다?

   Before....
   Class는, 코드 재사용성과 코드구성을 좀더 어렵게 만들었었다.
   Javascript에서 어떻게 this가 동작하는지 알아야했고,
   이벤트핸들러가 등록되는 방법을 알아야만 했다.
   또한 함수컴포넌트와 클래스 컴포넌트들을 구별하는것도 일 이었다.

=> Hook을 사용하면
(3). Class없이 React기능들을 사용하는 방법들을 알려준다.
개념적으로 React 컴포넌트는, 함수에 항상 더 가까우므로, React의 이런특징을
Hook은 보존시켜준다.

Today I try...

• 공식문서의 Dan Abramov와 Sophie Alpert(react core team manager in fb)가 React Conf 2018에서 소개한 Hook을 사용해서 애플리케이션을 리팩토링하는 방법 을 한 문장 한 문장 번역하면서 Hook의 개요를 좀더 알아보고자 노력했다.
  1시간짜리를 모두 번역할 시간은 없어서 엄청 쬐금. 하지만 의미있었다.

• React Hook에 대해 아직 잘 파악은 못했지만
  컴포넌트를 쪼개는것보다,좀더 로직에 집중할수있게 고안한 컨셉(ex) effect 해제를 위한 함수반환시 side effect를 메소드에 맡기면, 우린 로직에 집중할수있으니까.),
  코드 재사용성 및 로직 단순화(ex) 생명주기 메소드 단순화)를 예제를 실습하고, 문서를 읽으며 대충은 파악한것 같다. (특히 구독해제 예제를 보면서 느낌)잘만 사용하면 코드가 가벼워질것 같다.