[React/Hooks] Nooks! #01

Collection of React Hooks ready to install with NPM

Hooks Library

 

useTitle
useInput

.

.

등등

위 hooks를 시도해볼 것임

 

 

npm 라이브러리에서 다운 받을 수 있는 Hooks들이 많다.

 

npm

 

준비물: npm, node.js, react

 

 

hook?

react의 state machine에 연결하는 기본적인 방법, 함수형 프로그래밍이 가능

 

1. Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다

2. ook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있습니다. (구독 설정 및 데이터를 불러오는 것과 같은 로직) 

3. Hook은 Class없이 React 기능들을 사용하는 방법을 제시합니다. 개념적으로 React 컴포넌트는 항상 함수에 더 가깝습니다. Hook은 React의 정신을 희생하지 않고 함수의 사용을 권장합니다. 

 

 

Hook의 개요 – React

 

 

useMemo() : prop이 바뀌지 않으면 업데이트 될 필요가 없을 때 사용한다

=> memoization을 이용해 리렌더링이 필요하지 않는 부분에 이전값을 미리 메모리에 저장을 해놓고 그 데이터를 사용한다.

memo를 사용하더라도 prop이 바뀌면 리렌더링 되는 것은 같다.

 

성능문제가 자주 발생하는건 아니기때문에 자주 사용하지 않을 뿐더러, useMemo를 사용하면 garbage collection에서 제외되므로 메모리를 더 사용한다는 이슈가 있다. 

https://www.daleseo.com/react-hooks-use-memo/

React Hooks: useMemo 사용법

 

useCallback():

뒷 인자의 값을 비워두면, 동일한 오브젝트를 계속 쓰게 된다.

useCallback 은 우리가 지난 시간에 배웠던 useMemo 와 비슷한 Hook 이다.

useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용한다.

useCallback도 메모와 마찬가지로 메모리 사용하게 되어서 신중해야함.

 

최적화?

컴포넌트에서 props가 바뀌지 않으면 Virtual DOM에 새로 렌더링 하는 것 조차 하지 않고 컴포넌트 결과물을 재사용하면서 최적화 작업을 할 수 있다. 이 작업을 위해서는 함수를 재사용하는 것이 필수이다.

 

 

 

출처: 노마드코더 hooks