React Hooks

기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 가능하게 해준다.

 

useState

함수형 컴포넌트에서 상태를 관리해주는 hook이다.

상태의 기본값을 파라미터로 넣어 호출한다.

이 함수를 호출하면 배열이 반환된다. 

첫번째 원소는 현재 상태

두번째 원소는 setter함수이다. 업데이트하고 싶은 새로운 값을 파라미터로 넣어주면 된다.

 

useEffect

렌더링 직후 작업을 설정하는 hook이다.

• 컴포넌트가 처음 나타났을 때 (마운트)
  • 외부 API요청 (REST API등)
  • setInterval을 통한 반복 작업 혹은 setTimeout을 통한 작업 예약
  • 라이브러리 사용
• 컴포넌트가 사라질 때 (언마운트)
  • setInterval, setTimeout을 사용해 등록한 작업들 clear하기
  • 라이브러리 인스턴스 제거
• 컴포넌트가 업데이트될 때 (특정 props가 바뀔 때)

첫번째 파라미터는 함수

두번째 파라미터는 의존값이 들어있는 배열을 넣는다. 빈배열을 넣는다면 컴포넌트가 처음 나타날때만 함수가 실행된다.

• cleanup 함수 : 함수를 반환할 수 있다. cleanup함수의 두번째 파라미터가 비어있다면 컴포넌트가 사라질 때 cleanup함수가 호출된다. cleanup함수의 두번째 파라미터가 비어있지 않다면 cleanup함수는 언마운트 시에도 호출되고 값이 바뀔때도 호출된다.

 

useReducer

useState hook 말고도 상태를 관리해줄 수 있는 hook이다.

상태관리 로직을 컴포넌트에서 분리시킬 수 있다.

첫번째 인자로 reducer함수. 상태와 액션 타입을 받아 액션에 따라 변화된 상태값을 return해준다. 상태값인 state와 액션을 발생시키는 함수인 dispatch를 return한다. return된 state와 dispatch를 필요한 컴포넌트에서 가져다 사용할 수 있다.

두번째 인자로 초기 상태값을 넣는다.

useState VS useReducer
- useState : 컴포넌트에서 관리하는 값이 하나이거나 그 값이 단순한 숫자, 문자열, boolean값일 경우
- useReducer : 컴포넌트에서 관리하는 값이 여러 개가 되어 상태의 구조가 복잡해지는 경우
(setter를 한 함수에서 여러번 사용해야 하는 일이 발생한다면 useReducer를 사용해 상태 관리 로직을 컴포넌트 밖으로 빼는 것이 가독성이 좋아지고 값만 넘기면 되기 때문에 편리하다.)

 

useRef

특정 DOM을 선택해야하는 상황에서 querySelector와 같은 DOM selector함수를 사용해 DOM을 선택한다.

React에서 특정 DOM을 선택해야하는 상황이 발생하면 useRef hook을 사용한다.

• 특정 엘리먼트의 크기를 가져오는 경우
• 스크롤바의 위치를 가져오거나 설정하는 경우
• 포커스를 설정하는 경우

useMemo

성능 최적화를 위해 useMemo hook을 사용해 연산된 값을 재사용할 수 있다.

첫번째 파라미터는 어떻게 연산할지 정의하는 함수

두번째 파라미터는 함수 안에서 사용하는 상태 혹은 props를 넣는다.

 

Custom hook

컴포넌트를 만들며 반복되는 로직이 발생할 경우 커스텀 훅을 만들어 반복되는 로직을 쉽게 재사용할 수 있다.