hook1. 기본

목차

1. hook의 도입 이유
2. hook이란?
3. lint 규칙이란?
4. hook을 사용하기 위한 환경
5. 생명주기 메서드에 대한 hook의 처리
6. hook의 한계

 

 

1. hook을 도입하게 된 이유?

• 타언어와는 다른 JS에서의 this 키워드 작동 방식 > class 사용의 어려움
• class 컴포넌트의 state 없이도 state 관련 로직 재사용 가능
• 컴포넌트를 생명주기 메서드 별로 쪼개는 것이 아닌, 연관된 기능에 기반한 더 작은 함수로 쪼갤 수 있음

 

즉 정리하자면,

• 함수형 컴포넌트에서
• class 컴포넌트의 state 개념과 생명주기 method() 개념에 대응되는 기능들을 사용하기 위해서
• hook을 도입하게 됨

 

2. hook이란?

• 함수형 컴포넌트에서도 state와 생명주기 개념을 사용할 수 있게 하는 함수 모음(인구쌤왈)
• class 컴포넌트 내에서는 동작하지 않음
• 특징

1. lint 규칙을 준수해야 함
2. 메서드명이 use로 시작하고 use로 시작하는 모든 함수 컴포넌트와 hook 뒤에는 대문자(=camelCase로 작성)

• useState
• useReducer
• useContext
• userCallback
• userMemo
• userEffect(클래스 컴포넌트에서의 생명주기와 비슷한 처리를 해줌, 함수명 컴포넌트 안에서만 작동)

 

 

 

3. lint 규칙이란?

• hook 호출은 반드시 최상위에서만 시행(반복문, 조건문, 중첩된 함수 등에서 hook 호출 금지)
• hook 호출은 오로지 React 함수 내에서 시행(React 함수 컴포넌트 or 커스텀 hook에서만 호출)
• 모든 렌더링에서 hook은 동일한 순서로 호출됨

 

 

 

4. hook을 사용하기 위한 환경

• 모든 React 패키지가 16.8.0 이상

 

 

5.생명주기 메서드에 대한 Hook의 대응

• constructor

• 함수 컴포넌트는 constructor가 필요없음
• useState 호출에서 state를 초기화 가능
• state 초기화하는 것이 가성비가 떨어진다면 useState에 함수 컴포넌트 전달 가능

 

• getDerivedStateFromProps: 렌더링하는 동안 업데이트 예약.
• shouldComponentUpdate
• render: 함수 컴포넌트 자체
• componentDidMount, componentDidUpdate, componentWillUnmount: useEffect Hook으로 가능
• getSnapshotBeforeUpdate, componentDidCatch 그리고 getDerivedStateFromError: 이러한 메서드에 대한 Hook은 없지만, 향후 추가 예정

 

6. hook의 한계

6-1. hook이 class의 모든 사용례를 커버하지 않는다.

• 현재 Hook의 초기 단계이며 일부 타사 라이브러리와 현재의 Hook은 호환되지 않을 수 있음
• 아래의 생명주기에 해당하는 Hook은 아직 없지만, 곧 추가할 계획

• getSnapshotBeforeUpdate
• getDerivedStateFromError
• componentDidCatch