React Todo List의 구조와 상태(State) 설계하기

웹 개발 공부를 시작할 때 누구나 한 번은 거쳐 가는 고전적인 프로젝트가 있습니다. 바로 투두 리스트(Todo List) 만들기입니다. 단순해 보이지만 React Todo List는 컴포넌트 설계, 상태 관리, 이벤트 처리 등 핵심 개념을 모두 실습해 볼 수 있는 최고의 React 프로젝트입니다. 이번 글에서는 단순한 UI 구성을 넘어 데이터를 브라우저에 저장하는 로컬스토리지 활용법까지 단계별로 알기 쉽게 풀어보겠습니다.

React 프로젝트를 시작할 때 가장 먼저 해야 할 일은 화면을 조각조각 나누는 컴포넌트 설계입니다. 레고 블록을 조립하듯이 화면에 보일 입력창, 목록, 개별 아이템을 분할하는 작업입니다. Todo List 앱에서는 크게 입력창을 담당하는 TodoInput, 목록을 보여주는 TodoList, 그리고 개별 항목인 TodoItem으로 나눌 수 있습니다.

이렇게 나눈 컴포넌트들이 서로 유기적으로 소통하려면 데이터를 어디에 담아둘지 결정해야 합니다. 이를 React에서는 상태(State)라고 부릅니다. 할 일 목록 데이터는 여러 컴포넌트가 함께 공유해야 하므로 이들의 공통 부모인 App 컴포넌트에서 useState 훅을 사용해 관리하는 것이 가장 직관적이고 효율적입니다.

동적 기능의 핵심, 이벤트 처리와 상태 업데이트

구조를 설계했다면 이제 사용자의 동작에 반응하는 동적인 기능을 만들어야 합니다. 새로운 할 일을 입력하고 등록 버튼을 누르는 순간 React는 변화를 감지하고 화면을 다시 그려야 합니다. 이때 기존 상태 데이터를 직접 변경하지 않고 복사본을 만들어 교체하는 불변성 법칙을 지키는 것이 매우 중요합니다.

예를 들어 새로운 할 일을 추가할 때는 기존 배열에 새로운 객체를 추가한 새 배열을 만들어 상태 변환 함수에 전달합니다. 삭제 기능 역시 원하는 아이템의 식별자(ID)를 기준으로 filter 메서드를 사용해 해당 아이템만 제외한 새로운 배열을 생성해 적용합니다. 이러한 일련의 흐름은 React의 기본적이면서도 강력한 단방향 데이터 흐름을 대변합니다.

로컬스토리지(LocalStorage) 연동으로 데이터 유지하기

열심히 작성한 할 일 목록이 브라우저를 새로고침하자마자 전부 사라진다면 무척 허탈할 것입니다. 이 문제를 해결하기 위해 웹 브라우저가 기본적으로 제공하는 미니 창고인 로컬스토리지를 활용합니다. 로컬스토리지는 브라우저를 닫았다가 다시 열어도 데이터가 안전하게 유지되는 반영구적인 저장 공간입니다.

React에서는 데이터가 변경될 때마다 로컬스토리지에 저장하고 앱이 처음 실행될 때 저장된 데이터를 불러와 초기 상태로 설정합니다. 이를 구현하기 위해 부수 효과를 처리하는 useEffect 훅을 사용합니다. 할 일 목록 배열이 수정될 때마다 localStorage.setItem을 통해 JSON 문자열 형태로 데이터를 동기화해주면 브라우저가 꺼져도 할 일이 그대로 보존되는 완벽한 앱이 완성됩니다.

더 나은 React 프로젝트를 향한 첫 걸음

이번 실습을 통해 컴포넌트의 유기적인 결합부터 브라우저 저장소 활용까지 React 프로젝트의 핵심 뼈대를 직접 조립해 보았습니다. 이 과정에서 배운 상태 관리와 로컬스토리지 연동 개념은 더 복잡한 대규모 애플리케이션을 개발할 때도 동일하게 적용되는 필수 기반 지식입니다. 기본형 투두 리스트에 필터링 기능이나 테마 변경 같은 자신만의 개성 넘치는 아이디어를 얹어 더 멋진 포트폴리오로 발전시켜 보시기 바랍니다.