React Hooks

Side Effect 란?

React 컴포넌트가 화면에 1차로 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들

 

비동기로 처리되어야 하는 이유?

데이터를 가져오려고 외부 API를 호출할 때, 일단 화면에 렌더링할 수 있는 것은 1차로 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다.  
이유는 연동된 API가 응답이 늦거나 없을 때 데미지(사용자의 답답함)를 최소화 시켜 사용자 경험 측면에서 유리하기 때문이다.

 

 

React Hooks 란?

Hooks는 리액트 v16.8에 새로 도입된 기능이다. 함수형태의 컴포넌트에서 사용되는 몇 가지 기술을 Hook이라고 부른다.  
함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공한다.

 

잘 사용하고 있던 클래스형 컴포넌트에서 함수형 컴포넌트로 바꾸는 이유?

React를 배우는 데 있어서 클래스는 큰 진입장벽이었다. 코드의 재사용성과 코드 구성을 어렵게 만들고, this의 사용이나 이벤트 핸들러의 등록 등 기본적인 JS문법 사항을 알아야 다룰 수 있기 때문이다. 또한 클래스는 잘 축소되지 않고, reloading이 깨지기 쉽고 신뢰하기 어렵게 만든다. 따라서 react의 최신 기술들이 클래스형 컴포넌트에 효과적으로 적용되지 않았다.

1. 클래스 문법이 어렵다.
2. 축소가 어렵다.
3. reloading의 신뢰성이 떨어진다.
4. 최신 기술의 적용이 효과적이지 않다.

이러한 클래스의 단점들을 함수형 컴포넌트로 해결할 수 있다. 하지만 클래스 컴포넌트의 장점인 state 사용이나 life cycle을 직접 다루는 등의 기능을 사용하지 못한다. 이를 해결하기 위해 Hook이 등장하였다. (Hook을 사용하는 이유)

 

 

Hooks의 종류

 

useState()

• 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다.
• 해당 함수의 인자에는 상태의 기본값이 들어간다.

useEffect()

• 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있다.

useReducer()

• useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용한다.
• 현재 상태, 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수이다. 반드시 불변성을 지켜줘야 한다.
• 첫 번째 인자로 reducer 함수를 받고, 두 번째 인자로 해당 리듀서의 기본값을 넣어준다.
• 이 Hook은 배열을 리턴하고, 첫 번째 인자가 상태고, 두 번째 인자가 dispatch 함수인 길이가 2인 배열을 리턴한다.

useMemo()

• 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.
• 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식이다.

useCallback()

• useMemo와 비슷하다. 주로 렌더링 성능을 최적화해야 하는 상황에 사용한다. 이벤트 핸들러 함수를 필요할 때만 생성할 수 있다.
• 첫 번째 인자에는 생성하고 싶은 함수를, 두 번째 인자에는 배열을 넣는다. 이 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야 한다.
• 함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 파라미터 안에 포함시켜 주어야 한다.

useRef()

• 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 한다.
• useRef를 통해 만든 객체 안의 current 값이 실제 엘리먼트를 가리킨다.