함수형 & 클래스형 컴포넌트
리액트에서 컴포넌트 생성 방식은 클래스형, 함수형 2가지로 나뉜다. 리액트 초기 클래스형의 컴포넌트만 지원되다 리액트 16.8 버전이후 Hooks이란 이름으로 함수형 컴포넌트 생성방식이 정식 채용되었고, 가벼움 & 단순하진 문법(this.state...this.props...의 굴레)으로 클래스형 보다 더 많은 사랑을 받는 중이다.
함수형 컴포넌트는 이전에도 쭈욱 사용해왔지만, state의 값 변경, 라이프 사이클을 사용할 수 없었기 때문에 정적컴포넌트에만 사용해 왔다. 함수형에서도 유사 라이프사이클과 state의 값 변경이 가능해 지면서 함수형컴포넌트 Hook의 사용도가 높아지고있다.
Q. 혹시 리액트에서 클래스가 사라지나? 앞으로 쓰면 안되는 걸까?!
A. Nop! 공식문서에 따르면 React에서 class를 제거할 계획은 없다니 쓸일있으면 앞으로도 잘쓰면 된다.
Hooks의 특징
- useState() : 클래스형의 setState()의 대체
- useEffect() : 클래스형의 라이프 사이클의 대체
- useContext() : ContextAPI를 단순하게 사용 가능
- useReducer() : 리덕스같이 상태관리자 사용
- use시리즈() : 자주쓰는 훅을 만들어 재사용이 가능
사용규칙
- 조건문,반목문과 같은 구문에 Hook를 넣지 말자 === 최상위컴포넌트에서만 호출 === 함수정의 바로 아래에 Hook사용
그밖에 Hook API
추가된 API는 위 링크에서 확인하자!
추천 plug-in
ESLint for react hook
CRA를 통해 리액트를 실행 한다면 ESLint 설정파일이 기본적으로 포함 되어 있다. 하지만 Next나 다른 프레임워크에서 동작한다면 ESLint를 설치해 주자!
npm install eslint-plugin-react-hooks --save-dev
// ESLint 설정 파일
{
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
"react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
}
}exhaustive-deps
useEffect의 2번째 인자(useEffect내부에 사용된 데이터, 상태값같은)를 해당 콜백함수 안에 명시된 state로 자동 완성해주는 기능
아래 2개중 1개 설치
npm install eslint-plugin-react-hooks@next
yarn add eslint-plugin-react-hooks@next
ESLint config :
{
"plugins": ["react-hooks"],
// ...
"rules": {
"react-hooks/rules-of-hooks": 'error',
"react-hooks/exhaustive-deps": 'warn' // <--- THIS IS THE NEW RULE
}
}