# 리액트 훅을 활용한 마이크로 상태관리-1

### 마이크로 상태 관리의 등장

* 리액트의 가벼운 상태 관리
    
* 기능과 목적에 따라 서로 다른 상태 관리 필요
    

### 기본적인 상태 관리 기능

* 상태 읽기
    
* 상태 갱신
    
* 상태 기반 렌더링
    

### 추가 기능

* 리렌더링 최적화
    
* 다른 시스템과의 상호작용
    
* 비동기 지원
    
* 파생 상태
    

### 전역 상태 탐구

* 전역 상태
    
    * 서로 멀리 떨어져 있는 여러 컴포넌트에서 사용하는 상태 (shared state)
        
* 전역 상태 구현이 어려운 이유
    
    * 리액트는 컴포넌트 모델에 기반하는데, 컴포넌트는 지역성이 중요하다.
        
    * 컴포넌트는 서로 격리돼야 하고 재사용이 가능해야 한다.
        

### 컴포넌트 모델

* 컴포넌트는 함수처럼 재사용 가능한 하나의 단위다.
    
    * 독립적이어서 여러 번 재사용 가능하다.
        
    * 외부에 의존하면 동작 일관성이 보장되지 않기 때문에 가급적 전역상태에 의존하지 않는게 좋다.
        

### 컴포넌트는 순수 함수인가

```javascript
// 순수함수 예시
const fn = (a) => return a+1

// 비순수함수 예시
let base = 2;
const addBase = n => n + base 

// 컨테이너 객체를 사용해서 순수 함수로 모듈화하는 방법
  const createContainer = () => {
    let base = 1; 
    const addBase = n => n+base;
    const changeBase = n => {base = n}
    return {addBase,changeBase}
  }
```

* **순수함수** : 오직 인수에만 의존하는 함수로, 동일한 인수를 받는 경우 동일한 값을 반환한다.
    
* **비순수함수** : 전달되지 않은 외부 인수값에 의존하는 함수
    
* 리액트 컴포넌트도 자바스크립트 함수이기 때문에, 컴포넌트 내부에서 상태를 사용할 경우 순수하지 않게 된다.
    

```javascript
// 인자가 아닌 상태에 의존하는 예시 
const AddBase = ({number}) => {
  const [base,setBase] = useState(0)
  return <div>{number+base}</div>
}
```