React Hooks 란 무엇인가?

 

React Hooks 란,

 

요약하자면 Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.

 

 

• React 16.8 버전 (2019년도) 에 추가된 공식 라이브러리
• Class형 컴포넌트에서만 쓸 수 있었던 state와 life cycle을 Function형 컴포넌트에서도 사용 가능
• 현재 공식문서에서는, Class형 컴포넌트보다는 Function형 컴포넌트로 새로운 React 프로젝트를 만들기를 권장
• 단, 기존의 Class형 컴포넌트들을 Hook을 이용한 Function형 컴포넌트로 refactoring할 이유는 전혀 없음

 

 

필요한 이유 

 

• 함수형 컴포넌트들은 기본적으로 리렌더링이 될때, 함수 안에 작성된 모든 코드가 다시 실행된다.
  - 클래스형 컴포넌트들은 method의 개념이므로, 리렌더링이 되더라도 render()를 제외한 나머지 method 및 state는 그대로 보존이 되어 있음.
  
  
• 이는 함수형 컴포넌트들이 기존에 가지고 있던 상태(state)를 전혀 관리(기억)할 수 없게 만든다.
  - 그래서 함수형 컴포넌트를 Stateless Component 라고 했던 것.
  - 단순하게 React에서의 state 만을 의미하는 것이 아닌, 함수내에 써져 있는 모든 코드 및 변수를 기억할 수 없다는 의미
  ⇒ 함수형 컴포넌트가 리렌더링될때 무조건 새롭게 선언 & 초기화 & 메모리에 할당이 됨
  
  
• 하지만 Hook의 등장으로, 브라우저에 메모리를 할당 함으로써, 함수형 컴포넌트가 상태(state)를 가질 수 있게 한 것이다.
  ⇒ 쉽게 말해서 함수 내에 써져 있는 코드 및 변수를 기억할 수 있게 됐다 라는 의미! 
• 공식홈페이지에 나온 Hook을 만든 이유는 다음과 같다.
  1) 컴포넌트 사이에서 상태 로직 재사용의 어려움 -> render props, HOC 등
  2) 복잡한 (클래스형) 컴포넌트들은 이해하기 어려움 -> 각종 생명주기 함수들
  3) 클래스 자체 개념을 이해하기 어려움 -> this 등

 

 

대표적인 Hooks들

 

 

1. useState

useState 는 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해준다. 만약에 함수형 컴포넌트에서 상태를 관리해야 되는 일이 발생한다면 이 Hook 을 사용하면 된다.

 

2. useEffect

useEffect 는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook 이다. 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를 합친 형태로 보아도 무방하다.

 

3. useContext

이 Hook 을 사용하면 함수형 컴포넌트에서 Context 를 보다 더 쉽게 사용 할 수 있다.

 

4. useReducer

useReducer 는 useState 보다 컴포넌트에서 더 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용하는 Hook 이다. 

 

 

 

 

참고 문서:

 

 

https://velog.io/@dongdong98/React-Hook-%EC%B4%9D%EC%A0%95%EB%A6%AC#%EC%99%9C-hook%EC%9D%84-%EC%93%B0%EB%A9%B4-%EC%A2%8B%EC%9D%80%EA%B0%80

React Hook 총정리

 

https://ko.reactjs.org/docs/hooks-intro.html

Hook의 개요 – React