자바스크립트로 상태 관리하기

이번 글에서는 새로 제작한 강의의 주요 주제 중 하나인 상태 관리에 대해 이야기해보려고 한다.

 

‘상태 관리’라는 단어를 들으면 대부분 Redux나 Context API와 같은 상태 관리 라이브러리를 떠올릴 것이다.

이 글에서는 라이브러리가 아닌, 순수 자바스크립트로 상태 관리를 하는 방법에 대해 알아보자.

 

조금 더 자세히 이야기해 보면, 상태는 웹 페이지 내에서 눈에 보이거나, 눈에 보이지 않는 모든 변화하는 데이터를 의미한다.

예를 들어, 사용자가 입력한 데이터, 버튼, 체크박스, 게시글 등이 상태에 해당한다.

 

그리고 이들을 관리하는 것이 바로 상태 관리입니다.

 

상태는 각각의 화면에서, 혹은 보이지 않는 영역에서 실시간으로 변화하는 값이기 때문에,

상태가 언제, 어떠한 값으로, 어떻게 변경되었는지를 관리하는 것은 매우 중요하다.

 

현재 가장 인기 있는 프론트엔드 라이브러리인 React.js에는 ‘상태 관리’를

보다 편하고 쉽게 할 수 있는 여러 라이브러리들이 제공되지만,

바닐라 자바스크립트에서는 ‘상태 관리’를 위한 라이브러리를 사용할 수 없다.

 

기본적인 코드 구조

바닐라 자바스크립트에서 여러 상태들을 관리하는 방법은 다음과 같다.

 

각 컴포넌트별로 다음과 같은 구조의 코드를 작성하면 된다.

데이터들의 초기 값을 넣어 놓을 state를 정의하고, state에 변화가 발생할 때마다 state 값을 업데이트할 수 있는 setState,

그리고 상태 값들에 따라 화면을 렌더링 하는 역할의 render 함수를 다음과 같이 작성한다.

 

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

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

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

 

 

예시 코드

예를들어, 추가 버튼을 누르면 숫자가 하나씩 증가하고,

삭제 버튼을 누르면 숫자가 하나씩 제거되는 코드를 작성하기위해 NumberList라는 이름의 컴포넌트를 생성해보자.

//NumberList.js
export default function NumberList({ $app, initialState, onAdd, onRemove }) {
    this.state = initialState;

    this.render = () => {
        $app.innerHTML = `
            <div>
                <h1>Numbers: ${this.state.join(', ')}</h1>
                <button id="add">추가</button>
                <button id="remove">삭제</button>
            </div>
        `;

        $app.querySelector('#add').addEventListener('click', onAdd);
        $app.querySelector('#remove').addEventListener('click', onRemove);
    };

    this.setState = (nextState) => {
        this.state = nextState;
        this.render();
    };

    this.render();
}

 

state 값으로는 초기 상태값을 전달 받고 추가, 삭제 버튼을 눌렀을 때 실행될 함수들(onAdd, onRemove)을 전달받는다.

this.render 함수에는 innerHTML을 사용해서 id가 app인 요소($app)에 추가를 해준다. 

 

그리고 index.js와 App.js의 코드는 아래와 같이 작성할 수 있다.

//index.js
import App from './App.js';

const $app = document.getElementById('app');
new App($app);


//App.js
import NumberList from './NumberList.js';

export default function App($app) {
    this.state = {
        numbers: [],
    };

    const addNumber = () => {
        const newNumbers = [...this.state.numbers, this.state.numbers.length + 1];
        this.setState({ numbers: newNumbers });
    };

    const removeNumber = () => {
        const newNumbers = this.state.numbers.slice(0, -1);
        this.setState({ numbers: newNumbers });
    };

    const numberList = new NumberList({
        $app,
        initialState: this.state.numbers,
        onAdd: addNumber,
        onRemove: removeNumber,
    });

    this.setState = (nextState) => {
        this.state = nextState;
        numberList.setState(this.state.numbers);
    };

    const init = () => {
        this.setState({
            numbers: this.state.numbers,
        });
    };

    init();
}

 

초기 상태를 설정하고, 상태가 변경될 때마다 NumberList 컴포넌트의 상태를 업데이트한다.

 

addNumber 함수는 다음 숫자 하나를 추가해 주도록 작성해 주고,

removeNumber 함수는 numbers 배열의 마지막 숫자를 제거하도록 작성한다.

 

그리고 NumberList 컴포넌트에 초기 상태값과, 추가 및 삭제 함수를 전달하고,

this.setState를 통해 새로운 상태를 받아 this.state를 업데이트한다.

 

코드 실행 결과

 

정리

상태 관리는 웹 애플리케이션의 일관성을 유지하고, 사용자가 상호작용하는 요소들의 상태를 추적하는 데 매우 중요하다.

특히 복잡한 애플리케이션에서는 상태 관리가 더욱 중요하며, 여러 컴포넌트 간에 상태를 공유하거나,

상태가 자주 변경되는 경우 효율적인 상태 관리가 필수적이다.

 

바닐라 자바스크립트로 상태 관리를 구현하는 것은 상태 관리 라이브러리의 동작 원리를 이해하는 데 큰 도움이 된다.

이를 통해 더 나은 코드 구조와 상태 관리 패턴을 이해할 수 있으며, 상황에 맞게 적절한 도구를 선택할 수 있는 능력을 키울 수 있다.

 

---

'한 번에 끝내는 자바스크립트' 강의는 이러한 바닐라 자바스크립트로 상태를 관리하는 방법 뿐만 아니라

history api를 사용한 라우팅 및 바닐라 자바스크립트로 SPA를 제작하는 내용까지 다룹니다.

이 글을 읽은 분들께 45% 할인 쿠폰을 드립니다.

 

강의 링크 및 쿠폰 정보

강의 링크 : https://inf.run/WfRmY

쿠폰 번호 : 17463-caaa5d30e881
등록 기간 : 무제한