이 글은 2026년 3월 16일 작성된 글입니다.
오늘은 지난 8일차 작성하였던 Todoapp
컴포넌트 구조 분리와 Context API를 통한 전역 상태 관리를 적용해 보았다.
또한 React 상태 관리 라이브러리의 세대별 트렌드에 대해서도 정리하였다.
1. 컴포넌트 분리
React에서는 UI를 작은 단위의 컴포넌트로 분리하여 관리한다.
이번 Todo App에서는 다음과 같이 분리하였다.
src
├─ components
│ ├─ TodoItem.jsx
│ ├─ TodoList.jsx
│ └─ TodoWriteForm.jsx각 컴포넌트 역할
| 컴포넌트 | 역할 |
|---|---|
| TodoItem | 할 일 UI |
| TodoList | 할 일 목록 렌더링 |
| TodoWriteForm | 할 일 입력 및 등록 |
이렇게 분리하면
- 코드 가독성 증가
- 재사용성 증가
- 유지보수 용이
라는 장점이 있다.
2. Context API를 통한 전역 상태 관리
React에서는 Context API를 사용하여
컴포넌트 트리 전체에 상태를 공유할 수 있다.
Todo 상태를 전역에서 사용하기 위해 Context를 생성하였다.
import { createContext } from "react";
export const TodoContext = createContext();Provider를 통해 하위 컴포넌트에 상태를 전달한다.
<TodoContext.Provider value={{ todos, addTodo, removeTodo, editTodo }}>
{children}
</TodoContext.Provider>이렇게 하면
App
├ TodoWriteForm
├ TodoList
└ TodoItem어느 컴포넌트에서도 상태를 사용할 수 있다.
3. React 전역 상태 관리 라이브러리 트렌드
React에서는 다양한 상태 관리 라이브러리가 존재하며
시간이 지나면서 아래 순서대로 사용 트렌드도 변화하였다.
- Redux
- Flux
- MobX
ㄴ 구조가 복잡
ㄴ 보일러플레이트 코드가 많음
- Redux Toolkit (RTK)
- Recoil
ㄴ Redux 단순화
ㄴ React 친화적 상태 관리
- Zustand
- Jotai
- Context API
ㄴ 매우 간단한 API
ㄴ적은 보일러플레이트
ㄴ React Hooks 기반
최근에는 Zustand 같은 가벼운 상태 관리 라이브러리가 많이 사용되는 추세이다.
4. HTML과 JavaScript 모듈 연결
HTML에서 JavaScript를 다음과 같이 연결한다.
<script type="module" src="./src/main.js"></script>여기서 중요한 점은
type="module"을 사용하면 JavaScript가 실행된다는 것이다.
이 방식의 특징
- import / export 사용 가능
- 모듈 단위 코드 관리 가능
- 브라우저에서 직접 모듈 로드
2주차 팀 과제
- 사실 팀 단위의 프로젝트는 아직 아니다.
- React 기반의 Todo 앱을 만든 후
Github 에 PR 올린 후 최소 2명 이상의 팀원들과 서로 리뷰하기 ! - 팀원의 의견을 듣고 배울 수 있는 시간이 될 것 같다.
✅ 정리
오늘 Todo App을 구현하면서
- React 컴포넌트 분리
- Context API를 활용한 전역 상태 관리
- React 상태 관리 라이브러리의 변화
- Html-js 간 Module 연결 방식
을 정리하였다.
단순한 Todo App이지만
React 애플리케이션 구조를 이해하는 데 중요한 연습이었다.
