Hooks란?

개념 : 함수형 컴포넌트에서 상태(state)와 생명주기 기능을 사용할 수 있게해서 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 도와주는 기술입니다.

클래스형 컴포넌트의 기능 사용할 수 있도록 도와준다.
#생명주기 #상태관리이를 손쉽게 할 수 있다.

왜 필요한가?

Hook를 통해 클래스형 컴포넌트에서만 가능하던 함수형 컴포넌트에서도 State(상태)와 생명주기를 손쉽게 다룰 수 있다.

• 함수형 컴포넌트 : 리렌더링이 될때, 함수 안에 작성된 모든 코드가 다시 실행된다.

  • 클래스형 컴포넌트들은 Method의 개념이라서, 리렌더링이 되더라도 render를 제외한 나머지의 method와 state는 그대로 보존되어 있음

• 함수형 컴포넌트들이 기존에 가지고 있던 상태(State)를 전혀 관리(기억)할 수 없게 만듦

공식 문서에 의한 Hook을 만든 이유

1) 컴포넌트 사이에서 상태 로직 재사용의 어려움 (Render, props, Hoc등등)
2) 복잡한 (클래스형) 컴포넌트들은 이해하기 어려움 -> 각종 생명주기 함수들
3) 클래스자체 개념을 이해하기 어려움 (this등등)

Hook의 최적화

1. 컴포넌트가 반드시 필요한 리렌더링만을 진행하는가?
2. 렌더링이 발생한다면, property 및 method가 반드시 필요한 것만 재할당 할 수 있게 하는가?
3. 위의 2가지를 무시할만큼, 렌더링이 자주되는가? 즉, 메모리를 할당하면

Hook 종류

자체적으로 제공하는 기본 Hook, 추가 Hook이 있고
사용자가 만들어서 사용할 수 있는 Custom Hook이 있다.

기본 Hooks

• useState (동적 상태 관리)
• useEffect (side effect 수행 -mount/unmount/update)
• useContext (컴포넌트를 중첩하지 않고도 전역 값 쉽게 관리)

추가 Hooks

• useReducer (복잡한 컴포넌트들의 state를 관리 -분리)
• useCallback (특정 함수 재사용)
• useMemo (연산한 값 재사용)
• useRef (DOM선택, 컴포넌트 안에서 조회/수정할 수 있는 변수 관리)
• useImperativeHandle
• useLayoutEffect
• useDebugValue

Ad

https://velog.io/@goyou123/React-Hooks-%EC%B4%9D%EC%A0%95%EB%A6%AC