Class / Functional Component
Hook
- React Hooks are functions that let us hook into the React state and lifecycle features from function components.
- React Hooks are currently available in the alpha release of react@16.7.0-alpha.0.
- function component에서는 원하는 기능을 함수로 만든 후 필요한 곳에 넣어 주기만 하면 되기 때문에 로직의 재사용이 유연해진다.
- class component가 가지고 있던 복잡성, 재사용성의 단점까지 해결된다.
예제코드
- Class Component → Functional Component
- componentDidMount() → useEffect()
- this.state → usestate
React Hooks: useState(using the state hook) | Hacker Noon
함수형 컴포넌트와 클래스, 어떤 차이가 존재할까?
리액트 훅(react hook)이란?
장점
- 함수형 컴포넌트에서 클래스형 기능을 구현 가능하게 한다.
- State, LifeCycle, Reference등의 기능을 사용가능하다.
- 클래스형 컴포넌트가 가지고 있던 복잡성, 재사용성의 단점을 해결
종류
1) useState
- 함수형 컴포넌트에서도 상태값을 관리할 수 있다.
- 첫번째 배열 원소는 상태값(state), 두번째 원소는 상태값을 변경하는 함수
const = [count, setCount] = useState(0)
2) useEffect
Life-cycle 함수
마운트(나타난다)
- 초기 props 값을 컴포넌트의 state로 정하는경우
- REST API 이용하는 경우
- setInterval, setTimeout
언마운트(return () => { 실행 })
- clearInterval, clearTimeout
- 라이브러리, 인스턴스 제거
deps
- 두번째 값으로 deps (dependence) 값을 넣어줘야한다.
- deps = [] 인경우 처음 한번만 실행됌
- deps = [user] 인경우, user 값이 처음 생기거나(마운트), 변경될때마다 실행된다.
3) useCallback
- '함수'를 재사용할때 사용한다.
- 이벤트 핸들러 함수를 필요할 때만 생성해 줄 수 있다.
- 함수를 내부에 선언해놓으면 리렌더링 될때마다 VirtualDOM에 매번 다시 선언됌
- VirtualDOM에 하는 rerendering까지 줄일 수 있는 방법
- 함수를 다시 선언하는 것은 그렇게 큰 메모리를 잡아먹는 것은 아니지만. 재사용 하는 것이 좋음
deps
참고하고 있는 값을 넣어줘야한다.
4) useReducer
상태값을 리덕스처럼 관리할 수 있다.
리액트 hooks: 함수형 컴포넌트
때늦은 React Hooks 시리즈 1탄 - 개요/useState
MobX
- 프론트엔드를 위한 어플리케이션 상태 관리 라이브러리
- 주로 React와 함께 사용되며, 상태 관리 라이브러리라는 특성 때문에 종종 Redux와 비교된다.
Redux가 함수형 아이디어를 적용했다면 MobX는 반응형 아이디어를 적용했다.
MobX에서는 반응형 프로그래밍 패러다임에서 필수적으로 언급되는 옵저버(Observer) 패턴을 적극적으로 사용한다. - 다만, MobX에서는 오직 상태(데이터)만 관찰 가능하며, 상태가 변경되었을 때 반응한다.
또한 상태를 변경시키는 것도 직접해야 한다.
한마디로 말해, MobX는 상태를 Observable하게 관리할 수 있도록 돕는 라이브러리다.
예제코드
// src/models/UserStore.js
import { observable, action, computed, configure } from 'mobx';
import axios from 'axios';
configure({ enforceActions: true });
class UserStore {
// 값들에 'observable'로 표시함으로써 'observers'에 의해 관찰됩니다.
@observable users = [];
@observable selectedUser = {};
@computed get selectedId() { return this.selectedUser.id; }
// enforceActions 모드에서는 오직 action만 mobx state를 변경할 수 있습니다.
@action setUsers = (users) => { this.users = [...users]; }
@action selectUser = (user) => { this.selectedUser = user; }
// observable state를 clear 하기
@action clearSelectedUser = () => { this.selectedUser = {}; }
@action getUsers() {
// ajax 호출과 MobX action의 동기화
axios.get('http://jsonplaceholder.typicode.com/users')
.then(response => {
this.setUsers(response.data)
});
}
}
const store = new UserStore();
export default store;
slowly but surely