[ReactJS] React Hook(리액트 훅) 이란?

React Hook(리액트 훅) 이란?

---

개요

  리액트에서 중요한 React Hook(리액트 훅)의 개념 정리를 통해 프로젝트에서 효율적으로 사용할 수 있도록 하고, 대표적인 훅들에 대해 알아본다.

 

목차

• React Hook의 등장배경
• React Hook 이란?
• 대표적인 React Hook

 

소개

 1. React Hook의 등장배경 

 

React Component 종류

 

  리액트 컴포넌트는 함수형 컴포넌트(Functional Component)와 클래스형 컴포넌트(Class Component)로 나뉜다.

 

리액트 초기에는 일반적으로 함수형 컴포넌트(Functional Component)를 사용하였으나, 값의 상태를 관리(state) 혹은 Lice Cycle Method(생명 주기=컴포넌트가 생성되고 사라지는 과정이 존재 할 때)를 사용하여야 할 때에만 클래스형 컴포넌트(Class Component)를 사용하였다.

 

함수형 컴포넌트(Functional Component)가 사용된 이유는 아래와 같은 클래스형 컴포넌트(Class Component)의 대표적인 단점때문이였다.

 

1. 코드의 구성이 어렵고 Component의 재사용성이 떨어진다.
2. 컴파일 단계에서 코드 최적화를 어렵게 한다.
3. 최신 기술의 적용이 효과적이지 않다.

 

  이러한 클래스형 컴포넌트(Class Component)의 단점을 보안하여, 함수형 컴포넌트(Functional Component)를 사용 할 수 있도록 등장한 것이 바로 React Hook(리액트 훅)이다.

 

 2. React Hook 이란? 

 

React Hook(리액트 훅)의 정의

 

  React Hook 이란, 리액트 v16.8에 새로 도입된 기능으로, 함수형 컴포넌트(Functional Component)에서 사용되는 몇가지 기술들을 일컫는다. 리액트 훅은 함수형 컴포넌트(Functional Component)가 클래스형 컴포넌트(Class Component)의기능을 사용 할 수 있도록 해주며 대표적인 예로는 useState, useEffect 등이 존재한다.

 

React Hook(리액트 훅)의 규칙

 

1. 리액트 Hook은 반복문, 조건문 혹은 중첩된 함수 내에서 호출하면 안되며 반드시 최상위(at the Top Level)에서만 Hook을 호출해야 한다. 또한 Hook은 렌더링 시 항상 동일한 순서로 호출 되어야 한다.
2. Hook은 React 함수 내에서만 호출 해야 한다. 즉, 리액트 Hook은 함수형 컴포넌트(Functional Component) 에서 호출해야 하며, 추가적으로 custom hooks에서 또한 호출이 가능하다.

 

 3. 대표적인 React Hook 

 

1. useState

 

useState는 Component에서 상태(state)값을 추가 할 때 사용되며, 클래스형 컴포넌트(Class Component)에서만 사용 가능하던 State를 함수형 컴포넌트(Functional Component)에서도 사용 가능 하도록 한 대표적인 기능이다.

선언은 const [변수명, 상태를 업데이트 할 함수명] = useState(초기값) 을 통해 할 수 있으며, useState로 선언된 변수는 상태(state)가 변할 때 마다 페이지를 리렌더링 시키게 된다. 이 때 (상태를 업데이트 할 함수명)은 비동기로 처리 되는데, 이는 함수가 호출 될 때 마다 화면을 다시 렌더링 하기 때문에 성능이슈가 발생 할 수 있기 때문이다.

 

2. useEffect

 

useEffect는 화면이 렌더링 될 때마다, 특정 작업을 실행 할 수 있도록 하는 Hook이다. 이를 통해 함수형 컴포넌트(Functional Component)에서 Side Effect를 사용 할 수 있게 됐을 뿐만 아니라, 클래스형 컴포넌트(Class Component)의 Life Cycle Method에서 사용되는 componentDidMount(최초 렌더링) 와 componentDidUpdate(렌더링 후 업데이트)를 합친 형태로, 페이지가 렌더링 될 때 변화된 값으로 인해 바뀌어야 할 화면의 데이터들을 처리해준다.

선언은 useEffect( () => {익명함수}, []) 이며 매개변수는 보이는것과 같이 익명함수와 빈 배열이다. 뒤의 빈 배열의 종류에 따라 렌더링의 횟수를 조절 할 수 있다.
1. [] = 최초 렌더링(마운트) 될 때 한번만 실행
2. [상태값1, 상태값 2..] = 선언한 상태값들이 업데이트 될 때만 실행
3. 생략 = 리렌더링시마다 반드시 실행

 

3. useReducer

 

useReducer는 이 전 상태(state)와 Action을 결합하여, 새로운 상태값(state)를 만든다. 일반적으로 React에서 상태관리를 위해 사용하는 Hook은 useState이지만, 좀 더 복잡한 상태 관리가 필요한 경우 reducer를 사용 할 수 있다.

선언은 const [변수명, dispatch] = useReducer[reducer, 초기값, 초기함수) 이다.
1. dispatch = reducer 함수를 실행시키며, action 객체(=어떠한 행동인지를 나타내는 type 속성과 관련 데이터로 구성)를 인자로 받으며, action 객체를 통해 컴포넌트 내에서 상태 값(state)의 업데이트를 일으킨다.
2. reducer = dispatch를 통해 실행되며, 컴포넌트 외부에서 상태 값(state) 를 업데이트 한다. 함수의 인자로는 state와 action을 받으며 이를 통해 새로운 state를 반환한다.

 

참고자료

 

1. https://ko.reactjs.org/docs/hooks-overview.html

Hook 개요 – React