Hooks
Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.
React 16.8 버전 부터 추가된 공식 라이브러리이다.
기존에 클래스형 컴포넌트에서만 쓸 수 있던 state와 life cycle을 함수형 컴포넌트에서도 사용 가능하다.
클래스형 컴포넌트보다는 함수형형 컴포넌트로 새로운 React 프로젝트를 만들기를 권장한다.
단, 기존의 클래스형 컴포넌트들을 Hook을 이용한 함수형 컴포넌트로 리팩토링할 이유는 전혀 없음
공식 홈페이지에 따르면 Hook을 만든 이유
hook을 사용해 함수형 컴포넌트에서도 state와 생명주기를 다룰 수 있기에 클래스형 컴포넌트에서만 가능하던 상태관리를 더 손쉽게 할 수 있어 필요하다.
브라우저에 메모리를 할당 함으로써, 함수형 컴포넌트가 상태를 가질 수 있게 한 것이다.
- 컴포넌트 사이에서 상태 로직 재사용의 어렵다. (render props, HOC 등)
- 복잡한 클래스형 컴포넌트들은 이해하기 어렵다. (각종 생명주기 함수들)
- 클래스자체 개념을 이해하기 어렵다 (this)
그래서! Hook은 브라우저의 메모리 자원을 사용하기에 함부로 남발하면 오히려 성능저하를 불러올 수있다.
useEffect
마운트 : 진입
언마운트 : 이탈
업데이트 될 때 : 업데이트
useEffect(() => {
// 첫번째 파라미터 (함수) ...
return // 첫번째 파라미터 (함수) 종료
}, [ /* 두번째 파라미터 (의존성 배열) */ ]);- 첫번째 파라미터 : 함수가 들어가는 부분.
return 문에 cleanup 함수는 useEffect에 대한 뒷정리를 해준다.
의존성 배열이 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출된다.
- 두번째 파라미터 : 의존값이 들어있는 배열을 넣는다.
아무 값이 없으면 컴포넌트가 처음 나타낼때만 첫번째 파라미터 함수가 호출된다.
값이 있으면 컴포넌트가 처음 마운트 될 때에도 호출되고, 지정한 값이 업데이트될때마다 호출 된다.
useState
컴포넌트의 state(상태)를 관리하는 Hook.
함수형 컴포넌트에서 가변적인 상태를 지닐 수 있게 해주며, 함수형 컴포넌트에서 상태를 관리해야 할 때 사용합니다.
setState 동기일까? 비동기일까?
비동기적으로 동작한다.
setState, 상태값 변경 함수는 비동기적으로 동작한다. 리액트는 효율적으로 렌더링하기 위해 여러 개의 상태값 변경 요청을 배치로 처리한다.
비동기로 처리했을때의 이점!
성능 이슈 개선
리액트가 상태값 변경 함수를 동기로 처리하면 하나의 상태값 변경 함수가 호출될 때마다 화면을 다시 그리기 때문에 성능 이슈가 생길 수 있다.
useReducer
상태를 관리할때 쓰는 useState와 비슷한 Hook.
useReducer를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다.
상태 업데이트 로직을 컴포넌트 바깥에서 작성하거나, 다른 파일에서 작성 후 불러와서 사용 가능하다.
useState vs useReducer
- 관리하는 값이 하나이고 단순하다? → useState
- 관리하는 값이 여러개이고 구조가 복잡하다? → useReducer
- dispatch를 전역(context API)으로 사용하고 싶다? → useReducer
- 어려운 건 싫다? -> useState
useMemo
성능 최적화를 위한 Hook.
값을 캐싱 memoized를 의미하며, 이전에 계산한 값을 재사용한다는 의미를 가지고 있다
특징 : 함수의 반환 값을 반환
ex) 큰 객체의 값중에 내가 바꾼 값 1개만 바꾸는 최적화를 진행하고 싶을때 사용한다.
useMemo(() =>
/// 첫번째 파라미터, 함수
, [//의존성 배열]);- 첫번째 파라미터 : 어떻게 연산할지 정의하는 함수를 넣어준다
- 두번째 파라미터 : 의존성 배열이랑 같게 사용.
useCallback
useMemo와 비슷한 Hook. 함수 캐싱
useMemo를 기반으로 만들어지고, 함수를 위해서 사용할때 더욱 간편하다.
useMemo는 특정 결과값을 재사용 할 때 사용하지만,
useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용한다.
특징 : 메모이제이션된 함수를 반환
useMemo와 useCallback의 차이
useMemo는 메모이제이션된 값을 반환해서 직관적
useCallback은 메모이제이션 된 함수를 반환.
useRef
HTML요소(태그)나 컴포넌트의 메모리주소를 가져와, 객체(레퍼런스) 형식으로 관리 하는 Hook
- current 속성을 가지고 있는 객체를 반환한다.
- current 값이 바뀌어도, 재렌더링 되지 않는다.
- 재렌더링시에도, current 값은 없어지지 않는다.
custom Hooks
반복되는 로직을 쉽게 재사용할 수 있게 만들 수 있는 방법
컴포넌트를 만들다보면, 반복되는 로직이 자주 발생합니다. 예를 들어서 input 을 관리하는 코드는 관리 할 때마다 꽤나 비슷한 코드가 반복된다.
그래서! 커스텀 Hooks 를 만들어서 반복되는 로직을 쉽게 재사용하는 방법이다.
useLayoutEffect
브라우저가 화면에 DOM을 그리기 전에 실행하는 Hook
useEffect와 형태는 비슷하지만,
useEffect는 DOM에 반영이 안된채 기본형태가 표출되었다가 업데이트가 된다.
DOM이 그러지기 전에 업데이트가 되어야하는 형태여야하면 useLayoutEffect를 사용한다.
