[React]리액트 훅(Hook)에 대해 알아보자!(useState, useEffect) - 1

React에서 말하는 Hook은, React 버전 16.8부터 React 요소로 새로 추가되었다.

Hook을 이용하면, 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다.

// 그렇다고 React로부터 Class를 제거하지는 않고, 존재하는 코드와 함께 나란히 작동한다고 공식문서에 나와있다.

 

 일단 리액트 훅을 이해하기 위해서는 Side Effect의 개념을 알아야 한다.

side effect를 알아야 React hook 개념이 이해가 되고, 그 hook 안에 useState, useEffect가 속해있는 것이다.

 

 

◼ Side Effect

 

React Component가 화면에 1차로 랜더링 된 이후에, 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect 라고 한다.

예를 들어 데이터를 가져오려고 외부 API를 호출할 때, 일단 화면에 랜더링 할 수 있는 것은 1차로 먼저 랜더링하고, 실제 데이터는 비동기로 가져오는 것이 권장된다. 이것은 연동된 API가 응답이 늦거나, 응답이 없을 경우를 생각했을 때의 UX적인 측면에서 유리하기 때문이다.

 

Hook은 이 Side Effect를 수행하는 역할을 한다. 보다 간편하게!

 

◼ React Hook

 

앞서 말했듯 Hook은 리액트 버전 16.8부터 새로 도입된, 함수 형태의 컴포넌트에서 사용되는 기술이다.

대표적으로 함수형 컴포넌트에서 상태 관리를 하는 useState,

앞서 Side Effect에서 설명했던 랜더링 직후 작업을 설정하는 useEffect 등의 기능을 제공한다.

 

이전에 React를 배우는 데에 있어서는 클래스는 가히 필수적이었다.

하지만 클래스형 컴포넌트를 이해하기에는 쉬운 일이 아니었다.

왜나하면 클래스는 코드의 재사용성과 코드 구성을 어렵게 만들고,

this의 사용이나, 이벤트 핸들러의 등록 등 기본적인 JS 문법 사항을 알아야했기 때문이다.

 

또한 클래스는 React의 최신 기술들이 효과적으로 적용되기에는 어려움이 있었다.

클래스는 잘 축소되지 않고, reloading을 깨지기 쉽고 신뢰하기 어렵게 만들기 때문이다.

 

이러한 클래스의 단점들에도 불구하고 state 사용이나, life cycle을 직접 다루는 등의 기능을 사용하려면

함수형 컴포넌트보다는 클래스형 컴포넌트를 사용해야 했다.

 

이를 해결하기 위해 등장한 것이 React Hook인 것이다.