React Hooks (훅스) 정리

 

Hooks 란?

함수형 컴포넌트에서도 상태(State)를 다룰 수 있도록 제공되는 API

리액트 16.8버전 업데이트

 

1)     useState()

 

함수형 컴포넌트에서 state를 가질 수 있도록 하는 API

상태의 기본값을 인자로 넣어주며 상태값 – 상태를 설정하는 함수를 쌍(배열) 로 반환한다.

상태가 변경 될 때 마다, 컴포넌트가 다시 랜더링 된다.

 

const [value, setValue] = useEffect(‘initialValue’);

 

2)     useEffect()

 

컴포넌트가 랜더링 될 때 마다, 원하는 작업을 수행 할 수 있도록 하는 함수

함수의 두번 째 파라미터로 특정 state를 넣는다면, 해당 상태가 업데이트 될 때 마다 함수가 실행된다.

만약 빈 배열을 넣을 경우 첫 랜더링 시에만 실행된다.

컴포넌트 언마운트 직전 작업을 수행하고 싶다면 클린업 함수 return ()=>{} 를 작성한다.

 

useEffect(() => {
	//로직 수행
} ,[ state ])

 

3)     useReducer()

상태값을 다양한 형태로 조작하고 업데이트 할 수 있도록, 상태값과 dispatch를 반환하는 함수이다.

첫번째 파라매터에 리듀서 함수와 두번째 인자에는 리듀서의 기본값을 넣는다.

리듀서 함수에서는 action을 인자로 받으며, Switch 문 등을 활용하여 액션에 따른 상태의 업데이트 작업을 수행한다.

 

4)     useMemo()

현재 상태와, 이전 함수 실행 결과를 메모이제이션하고, 랜더링 시 상태 변화가 없을 때  기존 연산값을 반환하는 API

 

5)     useCallback()

랜더링 최적화를 위해 사용하는 API로, 두 번 째 인자로 등록된 state의 변화가 있을때 함수를 새로 생성한다.

해당값의 변화가 없다면 기존 함수를 반환한다.

useMemo() 가 연산 값(숫자, 문자) 등을 재사용한다면, useCallback()는 함수를 재사용 한다.