TIL 16 React Hooks 정리

React Hooks API

함수형 컴포넌트에서도 State와 컴포넌트 라이프사이클 등등의 것들을 가능하게 하는 것은 React Hooks API이다. 핵심은 Class 없이 React를 사용할 수 있게 해주는 것.

초기 리액트는 State와 컴포넌트의 Life Cycle 관리하려면 클래스형 컴포넌트만 사용가능하였고, 함수형 컴포넌트는 UI를 표현하는 것에만 주로 사용되었다. 하지만, 리액트의 16.8 버전(2019년, 2월)부터는 모든 컴포넌트를 함수형으로 만들 수 있게 되었고 React Hooks을 이용해 State와 컴포넌트의 Life Cycle 관리가 가능해졌다. 또한 상태 관리 라이브러리인 Redux 등을 사용하지 않고도 어느정도 까지는 리액트 기본제공되는 방법으로 상태 관리를 할 수있는 기대감을 갖게 되었다.

기본 Hook

useState, useEffect, useContext

추가 Hook

useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue

---

useState를 사용하는 이유는?

리액트로 웹 앱처럼 만들기 위해 State라는것을 사용합니다. State에 변수를 담아 변화가 감지되면 HTML을 자동으로 렌더링 하는 작업을 거치는데, 이때 클래스형 컴포넌트와 함수형 컴포넌트의 State 처리방식이 다릅니다. useState는 함수형 컴포넌트에서 사용하는 방법으로 클래스 컴포넌트에서만 가능했던 일들을 함수형에서도 가능한 기술을 추가한 것입니다.

useEffect를 사용하는 이유인 Side Effect는 무엇인가요?

사전적 의미로는 부작용으로 어떤 원인에 대한 의도하지 않은 결과를 뜻합니다. 프로그래밍 상에서도 다양하게 해석 할 수 있지만, React에선 useState를 사용해서 출력값들에 영향을 미치지 않고 추가로 할 수 있는 다른 작업들을 말한다. 그리고 함수형 컴포넌트 내에서 useEffect를 이용해 클래스형 컴포넌트의 라이프 사이클 처럼 쓸수 있다.

Hook 사용규칙은 무엇이 있나요?

1. 최상위 레벨에서만 Hook 호출 해야함. 조건문, 반복문, 중첩된 함수 등등 에서 Hook을 사용하면 안됨.
2. React 함수컴포넌트에서만 Hook 호출해야 함. 일반 자바스크립트 함수에서 호출하면 안됨. 직접 제작한 custom Hook에서는 가능.