상태관리

오늘은 상태관리에 대해서 알아볼 예정이다.

 

상태란 무엇일까?

=> 웹 페이지 내에서 눈에 보이는 / 보이지않는 모~든 데이터 변화를 상태라고 한다.

예를들면, 사용자가 입력한 데이터 값, 버튼, 체크박스 등 진짜 말그대로 값이 변하는 모든 데이터!!

 

그러니까, 지금 작성하고 있는 블로그의 상단 이 화면또한 모두 상태이다.

 

그럼 이러한 변하는 데이터들을 관리할 필요가 있어보인다. 우리는 이를 상태관리라고 한다.

페이지를 사용자의 화면에 띄우는 작업을 렌더링이라고 하는데, 상태가 바뀔때마다 웹페이지 전체가 리렌더링 된다면, 화면의 깜빡임 혹은 로딩처럼 화면이 계속해서 다시 뜨는 것을 보게될 것이고, 이는 사용자 UX에 좋지 못하다. 이를 개선하기 위해 상태관리가 필요하다! 

 

그럼 위에서 말한 리렌더링을 방지하기 위해서 상태관리를 어떻게 하나요? 라고 질문한다면,

페이지를 컴포넌트 단위로 나눈 다음, 각각의 파일에서 '상태 관리'를 통해 특정 '상태'를 기준으로 렌더링을 하는 방식으로 불필요한 리렌더링을 방지한다. 라고 답할수 있을 것이다. 즉, 변화가 필요한 부분만을 대상으로 렌더링을 수행하는 것이다.

 

특히 자바스크립트 기반의 라이브러리인 React 에서는 useState, useEffect 와 같이 훅을 사용하거나, redux 와 같은 별도 라이브러리를 사용해서 웹 애플리케이션의 상태들을 효율적으로 관리한다.

 

일단 자바스크립트에서 어떤 구조로 상태를 관리하는지 먼저 봐두도록 하자.

this.state = {
		// 초기 상태 값들
};

this.setState = (nextState) => {
		this.state = nextState;
		// 상태 업데이트 후 렌더링
		this.render();
};

this.render() {
		// UI 렌더링 로직
}

기본 뼈대구조는 위와같이 작성한다.

- state, setState 를 사용하여  컴포넌트의 상태를 관리 - 상태 변화에 따라 웹 페이지(화면)를 업데이트하기 위해 render() 사용다행히 React에는 state, setState 메서드들이 내장되어있다. 하지만 바닐라 자바스크립트에서는 이 메서드들이 내장되어있지 않기 때문에, 비슷한 기능을 구현하려면 직접 코드로 작성해야한다.(이건 어쩌면 우리가 React를 배우는 이유이다.)

 

이를 실제로 간단한 코드에 적용하면 아래와 같다.

class Counter {
  constructor($target) {
    // 상태 초기화
    this.state = {
      count: 0,
    };

    // DOM 루트 요소
    this.$target = $target;

    // 상태 변경 함수
    this.setState = (nextState) => {
      this.state = nextState;
      this.render();
    };

    // 초기 렌더링
    this.render();
  }

  // 렌더링 함수
  render() {
    this.$target.innerHTML = `
      <div>
        <h1>Count: ${this.state.count}</h1>
        <button id="increase">+1</button>
        <button id="decrease">-1</button>
      </div>
    `;

    // 이벤트 바인딩
    this.$target.querySelector('#increase').onclick = () => {
      this.setState({ count: this.state.count + 1 });
    };
    this.$target.querySelector('#decrease').onclick = () => {
      this.setState({ count: this.state.count - 1 });
    };
  }
}

- state: 현재 상태 저장 객체

- setState(nextState): 상태 업데이트 → 자동으로 render 호출

- render(): 상태에 따라 DOM을 리렌더링

- 이벤트 핸들러에서 setState() 호출 → 상태 → UI 자동 반영