바닐라 자바스크립트로 상태 관리를 할 수 있을까?

프론트 엔드에서 중요한 개념 중 하나인 상태 관리에 대해 이야기해보려고 합니다.

상태 관리

‘상태 관리’라는 단어를 들으면 대부분 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를 업데이트합니다.

코드 실행 결과

정리

상태 관리는 웹 애플리케이션의 일관성을 유지하고, 사용자가 상호작용하는 요소들의 상태를 추적하는 데 매우 중요합니다. 특히 복잡한 애플리케이션에서는 상태 관리가 더욱 중요하며, 여러 컴포넌트 간에 상태를 공유하거나, 상태가 자주 변경되는 경우 효율적인 상태 관리가 필수적입니다.

바닐라 자바스크립트로 상태 관리를 구현하는 것은 상태 관리 라이브러리의 동작 원리를 이해하는 데 큰 도움이 됩니다. 이를 통해 더 나은 코드 구조와 상태 관리 패턴을 이해할 수 있으며, 상황에 맞게 적절한 도구를 선택할 수 있는 능력을 키울 수 있습니다.

할인 쿠폰

위 내용은 인프런의 [한 번에 끝내는 자바스크립트]강의에서 다룬 일부 내용입니다.

강의에 관심있으신 분들은, 아래의 쿠폰을 통해 강의를 할인가로 구매할 수 있습니다 😊

쿠폰 번호 : 17463-caaa5d30e881
강의 링크 : https://inf.run/WfRmY