[React] Hook

Hook

Hooks는 2019년 6월, 16.8버전에서 정식 출시된 기능으로, 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있게 해준 기능입니다.

즉, class에서만 사용할 수 있던 state, effect, ref기능들을 function에서도 useState, useEffet, useRef 등을 통해 사용할 수 있게 해주는 것입니다.

Class형이 아닌, Function형을 사용하게 된 계기는, Class형 컴포넌트의 길어지는 코드 길이 문제 때문입니다. 이 때문에 발생하는 중복 코드, 가독성 문제 등등을 해결하기 위해 등장한 것입니다.

 

Memo Hook

JS는 componet의 요소에 변화가 생기면 매번 mount됩니다. 매번 많은 데이터를 구하면 더 많은 시간이 걸리게 됩니다.

그래서, 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법이 Memoization이며, React에서는 useMemo훅을 사용합니다.

useMemo(() => { }, [ ]); 뒤에있는 [ ]값이 변화하면 콜백함수 () => { }가 실행됩니다.