바닐라 자바스크립트로 시작하는 프론트엔드 상태 관리

프론트엔드 개발에서 상태(State)는 UI와 데이터 흐름을 관리하는 중요한 요소입니다. 리액트(React)에서는 useState를 통해 상태를 쉽게 관리하고 UI를 간편하게 갱신할 수 있습니다.

useState는 UI를 자동으로 갱신하는 스마트홈 시스템처럼 작동하지만, 바닐라 자바스크립트로도 유사한 상태 관리 로직을 구현할 수 있습니다. 이번 글에서는 useState의 작동 방식을 살펴본 후, 바닐라 자바스크립트를 활용한 구현 방법을 소개합니다.

리액트의 ‘useState’

리액트는 useState라는 훅을 제공하여 컴포넌트에서 상태를 관리합니다. 이는 상태 변경 시 Virtual DOM을 사용해 필요한 부분만 업데이트하여 UI를 자동으로 갱신합니다.

1) useState 사용 예시

간단한 카운터 예제를 통해 useState를 사용할 수 있는 방법을 알아보겠습니다.

import 리액트, { useState } from "리액트";function Counter() {    const [count, setCount] = useState(0);    return (        
            
Count: {count}
             setCount(count + 1)}>Increment        
    );}

버튼 클릭 시 setCount를 통해 상태를 1씩 증가시켜 UI를 갱신합니다. 리액트는 이를 효율적으로 처리하여 성능을 최적화합니다.

‘바닐라 자바스크립트’로 상태 관리하기

바닐라 자바스크립트를 사용하여 상태를 정의하고 UI를 갱신하는 방법을 알아보겠습니다.

1) 상태 정의와 초기화

상태는 애플리케이션의 현재 데이터를 저장하며, 예를 들어 동물 사진 앨범에서는 선택된 탭과 해당 탭의 사진 데이터를 저장합니다.

this.state = {    currentTab: 'all',    photos: [],};

2) 초기화와 데이터 로드

초기화는 애플리케이션의 안정성을 높이는 과정입니다. 동물 사진 앨범에서는 기본 탭에 대한 사진 데이터를 로드합니다.

const init = async () => {    try {        const initialPhotos = await request('all');        this.setState({            ...this.state,            photos: initialPhotos,        });    } catch (error) {        console.error('Error loading initial data:', error);    }};init();

3) 상태 변경과 UI 갱신

상태 변경 시 명시적으로 DOM과 연결하는 로직을 작성해야 합니다. 아래는 상태 변경을 처리하는 예시입니다.

this.setState = (newState) => {    this.state = newState;    tabBar.setState(this.state.currentTab);    content.setState(this.state.photos);};

4) 다중 상태 관리

상태 간 의존성을 처리하기 위해 이벤트 핸들러와 상태 갱신 로직을 작성해야 합니다.

const tabBar = new TabBar({    $app,    initialState: this.state.currentTab,    onClick: async (name) => {        const newPhotos = await request(name);        this.setState({            ...this.state,            currentTab: name,            photos: newPhotos,        });    },});

바닐라 자바스크립트 상태 관리의 장점

바닐라 자바스크립트를 통해 상태 관리의 기본 개념을 체계적으로 익히고, 프레임워크 없이 상태를 관리하는 기초를 다질 수 있습니다.

1) 리액트 동작 원리 이해

상태 변경 후 UI를 수동으로 업데이트함으로써 리액트의 최적화 메커니즘을 이해할 수 있습니다.

2) 프레임워크 없이 상태를 관리하는 기본기 강화

바닐라 자바스크립트로 기본기를 다지는 경험은 다양한 프레임워크에서도 큰 도움이 됩니다.

3) 커스터마이징 가능성

프로젝트 요구사항에 맞는 로직을 커스터마이징할 수 있어, 불필요한 복잡성을 줄일 수 있습니다.

마치며

바닐라 자바스크립트를 통해 상태 관리의 원리를 이해하고, 개발자로서의 기본기를 강화하는 학습 과정이 중요합니다. 이는 리액트를 비롯한 다양한 프레임워크에서 유용하게 활용될 것입니다.

<참고>

인프런 - 한 번에 끝내는 자바스크립트