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

마이크로 상태 관리의 등장

• 리액트의 가벼운 상태 관리

• 기능과 목적에 따라 서로 다른 상태 관리 필요

기본적인 상태 관리 기능

• 상태 읽기

• 상태 갱신

• 상태 기반 렌더링

추가 기능

• 리렌더링 최적화

• 다른 시스템과의 상호작용

• 비동기 지원

• 파생 상태

전역 상태 탐구

• 전역 상태

  • 서로 멀리 떨어져 있는 여러 컴포넌트에서 사용하는 상태 (shared state)

• 전역 상태 구현이 어려운 이유

  • 리액트는 컴포넌트 모델에 기반하는데, 컴포넌트는 지역성이 중요하다.

  • 컴포넌트는 서로 격리돼야 하고 재사용이 가능해야 한다.

컴포넌트 모델

• 컴포넌트는 함수처럼 재사용 가능한 하나의 단위다.

  • 독립적이어서 여러 번 재사용 가능하다.

  • 외부에 의존하면 동작 일관성이 보장되지 않기 때문에 가급적 전역상태에 의존하지 않는게 좋다.

컴포넌트는 순수 함수인가

// 순수함수 예시
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}
  }

• 순수함수 : 오직 인수에만 의존하는 함수로, 동일한 인수를 받는 경우 동일한 값을 반환한다.

• 비순수함수 : 전달되지 않은 외부 인수값에 의존하는 함수

• 리액트 컴포넌트도 자바스크립트 함수이기 때문에, 컴포넌트 내부에서 상태를 사용할 경우 순수하지 않게 된다.

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